Использование всплывающих окон для отображения коротких сообщений на веб-странице в порядке, хотя и не так дружелюбно. Тем не менее, всплывающие окна бессильны с длинной информацией, такой как условия обслуживания веб-сайта. Это требует использования чего-то называемого модальной коробки Modal и встроить многострочную текстовую коробку Textarea в модальную коробку.
Эта вещь слишком сложно написать код JavaScript вручную, но его легче писать с начальной загрузкой.
1. Основные цели
Есть веб -страница с гиперссылкой и кнопкой:
Нажатие на них откроет модальную коробку, как показано ниже. Это модальное поле, нажав кнопку X в верхнем правом углу и подтверждение ниже.
2. Процесс производства
1. Поскольку вам нужно использовать начальную загрузку, вы можете скачать компоненты на официальном веб -сайте (нажмите, чтобы открыть ссылку). Версия начальной загрузки, используемая в производственной среде (нажмите, чтобы открыть ссылку). Bootstrap3 не совместим с 2. Рекомендуется использовать Bootstrap3 напрямую в соответствии с его документами разработки. Эта статья также сделана на основе Bootstrap3. В то же время, эффект JavaScript, предоставленный Bootstrap3, должен поддерживать jQuery1.11 (нажмите, чтобы открыть ссылку). Вы можете скачать jQuery1.11 (нажмите, чтобы открыть ссылку), совместимый со старым браузером IE6 (нажмите, чтобы открыть ссылку) с официального веб -сайта JQuery, а не JQuery2 (нажмите, чтобы открыть ссылку) в старом браузере IE6. После загрузки настройте каталог сайта. Decompress Bootstrap3 непосредственно в каталог сайта и поместите jquery-1.11.1.js в каталог JS, то есть тот же каталог, что и Bootstrap.js. Структура папки сайта примерно следующим образом:
2. Код этой веб -страницы заключается в следующем, и анализируются следующие фрагменты:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <Title> Modal Box </title> <meta name = "viewport" content = "width = width Device, начальная шкала = 1.0, пользовательский scalbable = no"> <link href = "css/bootstrap.css" rel = "styleshept" media = "screen"> <script type = "text/javascript" src = "js/jquery-11.1.1.js"> </script> <script = jquery-1.11.1.1.js "> </script> <script = jquery-1.11.1.1.js" src = "js/bootstrap.js"> </script> </head> <body> <p> <a data-toggle = "modal" data-target = "#mymodal"> Соглашение об обслуживании </a> </p> <p> <button Type = "Кнопка" Data-toggle = "modal" data-target = "#mymodal"> Нажмите на считывание кнопки «Сервис». id="myModal" role="dialog"> <div> <div> <div> <button type="button" data-dismiss="modal"> <span>×</span> </button> <h4 id="myModalLabel"> Service Agreement</h4> </div> <div> <p align="center"> <textarea rows=3 readonly="true" /> The terms of service of this Agreement have legal эффект. Условия обслуживания настоящего Соглашения имеют юридический эффект. Условия обслуживания настоящего Соглашения имеют юридический эффект. Условия обслуживания настоящего Соглашения имеют юридический эффект. </textarea> </p> </div> <div> <p align = "center"> <button Type = "button" data-dismiss = "modal"> ok </button> </p> </div> </div> </div> </div> </div> </body> </html>
(1) <голова> часть
<Head> <!-кодирование страницы-> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <Title> Modal Box </title> <!-Требуется этот веб-страница для автоматической адаптации к экрану ПК, планшета, мобильных и других устройств-> <Meta name = "Viewport" Viewport " Content = "width = width Device, начальная шкала = 1.0, user-scalbable = no"> <!-Этот пример требует поддержки из трех внешних плагинов-> <link href = "css/bootstrap.css" rel = "stylesheet" media = "screen"> <script type = "text/javascript" src = "js/jquery-11.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1. type = "text/javascript" src = "js/bootstrap.js"> </script> </head>
(2) Ссылки и кнопки, первоначально представленные на веб -странице
<p> <!-data-toggle = "modal" data-target = "#mymodal" требует открытой модальной коробки MyModal-> <a data-toggle = "modal" data-target = "#mymodal"> Соглашение об обслуживании </a> </p> <p> <!-class = "btn btn-danger"-это стиль кнопки в Bootstrap. -> <button Type = "button" Data-toggle = "modal" data-target = "#mymodal"> нажмите здесь, чтобы прочитать Соглашение об обслуживании </button> </p>
(3) Часть модальной коробки
Основы модальных коробок следующие:
Поэтому найден следующий код:
<!-class = "Modal Fade" требует, чтобы модальная коробка была открыта с помощью эффекта анимации, Class = "Modal" также в порядке, но она открывается очень внезапно. id = "mymodal" перекликается с вышеуказанной гиперссылкой и кнопкой-> <div id = "mymodal" rol = "dialog"> <viv> <!-Модальная компоновка коробка должна выполняться после модального контента. -> <div> <div> <!-Это заголовок модальной коробки, с полуколоном × и передаточным символом с ×, которая, по сути, является кнопкой закрытия-> <button type = "button" data-dismiss = "modal"> <pan> × </span> </button> <! <Div> <!-Это основная часть модальной коробки, которая встроена с текстовым поле только для чтения с несколькими строками 3. Текстовое поле центрируется в основной части модальной коробки. Это нормально без текстового поля, но контент будет представлен пользователю за один раз. Так почему бы просто не вспять окно? -> <p align = "center"> <textarea Rows = 3 readonly = "true" /> Условия обслуживания настоящего Соглашения являются юридически эффективными. Условия обслуживания настоящего Соглашения имеют юридический эффект. Условия обслуживания настоящего Соглашения имеют юридический эффект. Условия обслуживания настоящего Соглашения имеют юридический эффект. </textarea> </p> </div> <div> <!-Это хвост модальной коробки, а кнопка ОК в центре-> <p align = "center"> <button type = "кнопка" data-dismiss = "modal"> ok </button> </p> </div> </div> </div> </div> </div> </p> </div> </div> </div> </div> </div> </p> </div> </div> </dist> </div> </div>
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.