L'utilisation de fenêtres contextuelles pour afficher des messages courts sur la page Web est OK, mais pas si convivial. Cependant, les pop-ups sont impuissants à faire avec de longues informations comme les conditions de service du site Web. Cela nécessite d'utiliser quelque chose appelé modal box modal et d'intégrer une boîte de texte multi-lignes TextArea dans la boîte modale.
Cette chose est trop difficile d'écrire du code JavaScript manuellement, mais il est plus facile d'écrire avec Bootstrap.
1. Objectifs de base
Il y a une page Web avec un lien hypertexte et un bouton:
Cliquez sur eux ouvrira une boîte modale comme indiqué ci-dessous. Cette boîte modale, en cliquant sur le bouton X dans le coin supérieur droit et la confirmation ci-dessous se fermera.
2. Processus de production
1. Parce que vous devez utiliser Bootstrap, vous pouvez télécharger les composants sur le site officiel (cliquez pour ouvrir le lien). La version bootstrap utilisée dans l'environnement de production (cliquez pour ouvrir le lien). Bootstrap3 n'est pas compatible avec 2. Il est recommandé d'utiliser Bootstrap3 directement en fonction de ses documents de développement. Cet article est également réalisé sur la base de Bootstrap3. Dans le même temps, l'effet JavaScript fourni par Bootstrap3 doit être pris en charge par jQuery1.11 (cliquez pour ouvrir le lien). Vous pouvez télécharger jQuery1.11 (cliquez pour ouvrir le lien) compatible avec l'ancien navigateur IE6 (cliquez pour ouvrir le lien) sur le site officiel de JQuery, plutôt que JQuery2 (cliquez pour ouvrir le lien) dans l'ancien navigateur IE6. Après le téléchargement, configurez le répertoire du site. Décompressez Bootstrap3 directement dans le répertoire du site et placez jQuery-1.11.1.js dans le répertoire JS, c'est-à-dire le même répertoire que bootstrap.js. La structure du dossier du site est à peu près la suivante:
2. Le code de cette page Web est le suivant, et les fragments suivants sont analysés:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"> <éad- head> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <itle> modal box </ title> <meta name = "Viewport" Content = "width = Device-width, initial-scale = 1.0, utilisateur-échec = no"> <link href = "css / bootstrap.css" rel = "Stylesheet" media = "screen"> <script type = "text / javascrip src = "js / bootstrap.js"> </ script> </ head> <body> <p> <a data-toggle = "modal" data-target = "# mymodal"> accord de service </a> </p> <p> <bouton type = "bouton" data-toggle = "modal" datarget = "# myModal"> cliquez ici id = "mymodal" role = "dialogue"> <div> <div> <div> <bouton type = "Button" data-dismiss = "modal"> <span> × </span> </sponse> <h4 id = "Mymodallabel"> Accord de service </h4> </ div> <v> <p align = " effet. Les conditions de service du présent accord ont un effet juridique. Les conditions de service du présent accord ont un effet juridique. Les conditions de service du présent accord ont un effet juridique. </ textarea> </p> </ div> <div> <p align = "Center"> <Button Type = "Button" Data-Dismiss = "Modal"> OK </ Button> </p> </div> </div> </div> </div> </div> </body> </html>
(1) <A-tête> partie
<A-Head> <! - Page Encoding -> <Meta Http-Equiv = "Content-Type" Content = "Text / HTML; charSet = UTF-8" /> <Title> Modal Box </Title> <! - Exiger cette page Web pour s'adapter automatiquement à l'écran de PC, Tablet, Phone Mobile et autres périphériques -> <Meta Name = "Viewport" Content = "width = Device-width, initial-scale = 1.0, user-scalable = no"> <! - Cet exemple nécessite la prise en charge de trois plug-ins externes -> <link href = "css / bootstrap.css" rel = "Stylesheet" media = "screp" type = "text / javascript" src = "js / bootstrap.js"> </ script> </ head>
(2) Liens et boutons présentés à l'origine sur la page Web
<p> <! - Data-Toggle = "Modal" Data-Target = "# MyModal" nécessite la boîte modale ouverte de MyModal -> <A Data-Toggle = "Modal" Data-Target = "# MyModal"> ACCORD DE SERVICE </a> </p> <p> <! - Class = "BTN BTN-Danger" est le style du bouton dans BOOTSTRAPT. -> <Button Type = "Button" Data-Toggle = "Modal" Data-Target = "# MyModal"> Cliquez ici pour lire l'accord de service </pton> </p>
(3) pièce de boîte modale
Les bases des boîtes modales sont les suivantes:
Par conséquent, le code suivant est trouvé:
<! - Class = "Modal Fade" nécessite que la boîte modale soit ouverte avec un effet d'animation Fade, class = "modal" est également OK, mais il est ouvert très brusquement. id = "myModal" fait écho à l'hyperlien et au bouton ci-dessus -> <div id = "mymodal" role = "dialogue"> <div> <! - La disposition de la boîte modale doit être effectuée après le contenu modal. -> <div> <div> <! - Ceci est le titre de la partie modale, avec un demi-colon de × le caractère de transfert avec × ×, qui est essentiellement un bouton ferme -> <bouton type = "Button" Data-Dismiss = "Modal"> <span> × </span> </ / bouton> <! - Il s'agit du titre de la boîte modale -> <h4 Id = "MyModall" <div> <! - Ceci est la partie principale de la boîte modale, qui est intégrée avec une zone de texte en lecture seule avec un certain nombre de lignes de 3. La zone de texte est centrée dans la partie principale de la boîte modale. Il est bon sans zone de texte, mais le contenu sera présenté à l'utilisateur à la fois. Alors pourquoi ne pas simplement apparaître la fenêtre? -> <p align = "Center"> <TextArea Rows = 3 readonly = "true" /> Les conditions de service du présent accord sont légalement efficaces. Les conditions de service du présent accord ont un effet juridique. Les conditions de service du présent accord ont un effet juridique. Les conditions de service du présent accord ont un effet juridique. </ textarea> </p> </div> <div> <! - Il s'agit de la queue de la boîte modale, et un bouton OK centré est placé -> <p align = "Center"> <Button Type = "Button" Data-Dismiss = "Modal"> OK </ Button> </p> </ Div> </div> </div> </v> </div> </div>
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.