JQuery Мобильный поп
Очень популярный поп-диалоговые всплывающие окна могут быть наложены на дисплее страницы.
Всплывающие окна могут быть использованы для отображения текста, изображения, карты, или другой контент.
Создание поп-музыки, а также необходимость использования <a> <div> элемент. Добавление данных REL = свойство "всплывающий" на <a> элементе, <DIV> элемент для добавления данных-роли = "всплывающее окно" атрибута. Затем мы указываем идентификатор <DIV>, а затем установите значение HREF <a> <DIV> указанным идентификатором. <Div> Содержание содержание поп-дисплей.
Примечание: <div> поп и нажмите <a> ссылку должна быть на той же странице.
примеров
<Div данных роли = "всплывающее окно " ID = "myPopup">
<P> Это простой поп </ p>
</ Div>
Попробуйте »
Если вам нужно добавить отступы наружу и из всплывающего меню можно добавить категорию "Ui-контент" в <DIV> в:
примеров
Попробуйте »
Закрыть всплывающее окно
По умолчанию, нажав поп за пределами области или нажмите клавишу "Esc", чтобы закрыть поп-музыки. Если вы не хотите, чтобы нажать на область за пределами поп Закрыть всплывающее окно может добавить = "ложный" атрибут данных неотстранимый в добавленное (не рекомендуется). Вы также можете добавить кнопку Закрыть поп, используя кнопку = данных отн "назад" на имущество, и через стиль, чтобы контролировать положение кнопки.
| описание | примеров |
|---|---|
| Закрыть кнопку на правой стороне | пробовать |
| Закрыть кнопку слева | пробовать |
| Используя свойство данных неотстранимый | пробовать |
Позиционирование поп
По умолчанию, всплывающие окна будут отображаться непосредственно над щелчком мыши на элементе, если вам нужно контролировать положение поп-музыки, вы можете использовать данные-позиционно-приписывать для открытия клики поп по ссылке.
Контроль местоположения поп тремя способами:
| Значение свойства | описание |
|---|---|
| данных позиции к = "окна" | Всплывающие отображается в окне центра |
| данных позиции к = "# MyID" | Всплывающие отображаемые на известных элементов #ID |
| данных позиции к = "происхождения" | По умолчанию. Нажмите на элементы поп-дисплей. |
примеров
<a href="#myPopup2" data-rel="popup" class="ui-btn" data-position-to="#demo"> ID = " демо" </a>
<a href="#myPopup3" data-rel="popup" class="ui-btn" data-position-to="origin"> происхождения </a>
Попробуйте »
переход
По умолчанию, поп не эффект перехода. Если вы хотите , вы можете добавить эффекты перехода ( с помощью данных-перехода = "значение" атрибута JQuery Mobile Переход ):
Все экземпляры эффектов перехода
Попробуйте »
Поп-направление небольшой границы
Если вам нужно добавить немного поп-направление границы, вы можете использовать свойство в данных со стрелкой и указать значение "L" (слева), "т" (вверху), "г" (справа) или "б" (внизу):
примеров
<DIV данных роли = "всплывающее окно " ID = "myPopup" класс = "Пользовательский интерфейс-контент" данных стрелка = "л">
<P> левый направление границы. </ P>
</ Div>
Попробуйте »
диалог Pop
Вы можете поп производится в стандартном диалоговом окне (головки и содержание знака внизу):
примеров
<Div данных роли = "всплывающее окно" ID = "myPopupDialog">
<Div данных роли = "заголовок"> <h1> заголовок текст .. </ h1> </ DIV>
<Div данных ролей = "главный" класс = "Пользовательский интерфейс-контента"> <p> Некоторые текст .. </ p> <a href="#"> ссылки .. </a>
<Div данных роли = "сноска"> <h1> в нижней части текста .. </ h1> </ DIV>
</ Div>
Попробуйте »
изображение поп
Вы можете отобразить изображение в поп:примеров
<IMG SRC = "/ WP-содержание / добавления / 2015/10 / w3big.jpeg" Alt = "w3big" стиль = "ширина: 200px;"> </a>
<Div данных роли = "всплывающее окно" ID = "myPopup">
<IMG SRC = "/ WP-содержание / добавления / 2015/10 / w3big.jpeg" стиль = "ширина: 800px; высота: 400px;" Alt = "w3big">
</ Div>
Попробуйте »
Фон поп-обложка
Вы можете использовать свойства данных оверлеев тему после того, как поп добавить цвет фона.
По умолчанию, покрывая цвет фона прозрачным. Использование данных-оверлеев тему = "а", чтобы добавить светлый фон, использование данных наложения-тема = "B" добавить темный фон крышку:
примеров
<DIV данных роли = "всплывающее окно " ID = "myPopup" данных наложения-тема = "B">
<P> Позади меня есть темный фон. </ P>
</ Div>
Попробуйте »
Общие всплывающие окна фоновое изображение часто наложения:
примеров
<IMG SRC = "/ WP-содержание / добавления / 2015/10 / w3big.jpeg" Alt = "w3big" стиль = "ширина: 200px;"> </a>
<DIV данных роли = "всплывающее окно " ID = "myPopup" данных наложения-тема = "B">
<IMG SRC = "/ WP-содержание / добавления / 2015/10 / w3big.jpeg" стиль = "ширина: 800px; высота: 400px;" Alt = "w3big">
</ Div>
Попробуйте »
Примечание: В следующей главе вы узнаете , как использовать те формы , в поп - музыки.