Добавьте небольшое наложение в содержание страницы, как и эффекты на iPad, добавив дополнительную информацию в элементы страницы.
Зависимости плагинов
Всплывающее окно зависит от плагина для подъема инструментов, поэтому плагин для подъема инструментов должен быть загружен в первую очередь.
Селективная функция добавления
Для соображений производительности добавляются API атрибута данных о подсказках и всплывающих компонентах, что означает, что вы должны инициализировать их самостоятельно.
Дополнительные настройки требуются, когда всплывающие окно используются в группах кнопок и в группах ввода
Когда поле приглашения используется в сочетании с группой .btn или. INPUT-группой, вам необходимо указать опцию «корпус»: «Body» (см. Документацию ниже), чтобы избежать нежелательных побочных эффектов (например, когда появляется всплывающее окно, элементы страницы, которые сотрудничают с ней, могут стать более широкими или DE-разворотами).
При использовании всплывающих поля в запрещенных элементах страницы вам нужно добавить дополнительный элемент, чтобы завершить его
Чтобы добавить всплывающее окно в элемент отключенного или .disabled, оберните элемент страницы, который необходимо добавить в всплывающее окно в <Div>, а затем примените всплывающее окно к этому элементу <div>.
1. Статические случаи
4 Дополнительные варианты: вверху, правый, внизу и левый расположение.
Сегмент кода
.bs-example {border-color: #dd; граница-радий: 4px 4px 0 0; ширина границы: 1PX; Box-Shadow: нет; Полевая левая: 0; Право маржи: 0; пограничный стиль: твердый; } .bs-example-popover .popover {позиция: относительно; дисплей: блок; Плавание: осталось; Ширина: 240px; Маржа: 20px; }<h1> 3. Всплывающее окно </h1> <div> <div> <div> </div> <h3> Popover top </h3> <d Div> <p> sed posuere secectutur est в Lobortis. Аэниан ЕС Лео Квам. Pellentesque Ornare sem lacinia quam venenatis vestibulum. Аэниан ЕС Лео Квам. Pellentesque Ornare sem lacinia Quam venenatis. Аэниан ЕС Лео Квам. Pellentesque Ornare sem lacinia Quam venenatis vestibulum. </P> </div> </div> <div> <div> </div> <h3> Попвер -нижнее </h3> <d Div> <p> sed posuere consectutur est в лобортисе. Аэниан ЕС Лео Квам. Pellentesque Ornare sem lacinia quam venenatis vestibulum. Аэниан ЕС Лео Квам. Pellentesque Ornare sem lacinia Quam venenatis vestibulum. </P> </div> </div> </div> </div> </div>
Эффект предварительного просмотра
Код фрагмент:
<a href = "javaScript: void (0)" id = "a_pop" Data-Slacement = "нижний" content = "Ветер и дождь-это все равно, что тратить время на догоняние с белой лошадью. Вы все еще держите мечту в своей молодой ладони. Отличивают от всего мира, ветер и украшает снежинки, которые ударяют наши волосы. Однажды вы сказали, что не должны отделяться и быть вместе навсегда, и теперь я хочу спросить, является ли вы просто детской поговоркой, невинные годы не могут обмануть молодость. Я буду оправдать тебя. Тяжелый снег, пожалуйста, не стереть следы нашего бытия вместе. Тяжелый снег не может стереть следы, которые мы даем друг другу. Сегодня вечером трава разделена, и ночь на луну приведет вам тысячи миль, чтобы ждать осеннего ветра.
<strong> js инициализация: </strong> <script type = "text/javascript"> $ ("#a_pop"). Popover (); </script>Эффект предварительного просмотра:
Обратите внимание, что при указании размещения обратите особое внимание на проблемы направления. Поскольку всплывающее окно начинается появляться с центром элемента события триггера, она, вероятно, будет перезаписана и не может отображаться все из них.
Атрибут a tag href в коде должен быть указан как JavaScript: void (0), чтобы удалить эффект ссылки.
Четыре направления:
Код
<a href = "javascript: void (0)" id = "a_pop1" data-slacement = "слева"-content = "Ветер и дождь похожи на время, чтобы догнать белую лошадь. Вы все еще держите свой сон в своей молодой ладони? <a href = "javaScript: void (0)" id = "a_pop2" data-slacement = "top" data-content = "Мы сказали, что не должны отделяться, и мы всегда должны быть вместе, даже если мы со временем, даже если мы отправимся в мир от всего мира, ветер и снежные санкции дуют белые волосы. Вы помните, когда мы говорим, что пойдем в мир вместе?" Data-Original-title = "время до дождя до дождя"> Верхний </a> <a href = "javascript: void (0)" id = "a_pop3" Data-slacement = "нижний" content = "Бесконечные желания, совершенные в середине лета в этом году, мы держали руки и по очереди пересекали реку. Вы всегда говорили, что вы всегда должны быть разделенными. Я не разбираетесь, что вы хотите, что вы хотите, чтобы вы ни были, я только что вы захотите. слова. " DATA-ORIGINAL-TITLE = "Время кипятить дождь"> Нижний </a> <a href = "javaScript: void (0)" id = "a_pop4" Data-Slacement = "right" data-content = "Невинные годы не могут быть обманывают молодежь. Я переживаю вас. Я буду справляться с вами. Я не буду снегоубляться. Я не могу не достойно. Мы не могу не достойно. Снеж. Сегодняшняя трава оставляет яркую луну и отправляет вам тысячи миль, чтобы ждать осеннего ветра в следующем году. $ ("#a_pop2"). popover (); $ ("#a_pop3"). Popover (); $ ("#a_pop4"). Popover (); </script>Предварительные эффекты;
2. Варианты
Варианты могут быть переданы через свойства данных или JavaScript. Для атрибута данных вам необходимо разместить имя опции после данных, например, data-animation = "".
Применить свойства данных к одному всплывающему окне
Для одного всплывающего окна вы можете указать параметры отдельно через свойство данных, как показано выше.
3. Метод
$ (). Попвер (опции)
Инициализирует всплывающее окно для набора элементов.
.popover ('show')
Показывает всплывающую коробку.
$ ('#element'). Popover ('show')
.popover ('Hide')
Скрыть всплывающую коробку.
$ ('#element'). Popover ('Hide')
.popover ('Toggle')
Показать или скрыть всплывающую коробку.
$ ('#element'). Popover ('Toggle')
.popover ('уничтожить')
Скрыть и уничтожить всплывающую окно.
$ ('#element'). Popover ('Dissult')
IV События
$ ('#mypopover'). On ('hidden.bs.popover', function () {// что -то ...})Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего об этой статье. Я надеюсь, что для всех будет полезно изучить и освоить всплывающую всплывающую коробку Bootstrap.