Как создать всплывающее окно в jQuery Mobile?
Как создать всплывающее окно в jQuery Mobile?
2 ответа
@francis_schuster
В jQuery Mobile вы можете создать всплывающее окно (popup) с помощью компонента "popup". Вот пример кода, показывающий, как создать простое всплывающее окно в jQuery Mobile:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <title>jQuery Mobile Popup Example</title> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Popup Example</h1> </div> <div role="main" class="ui-content"> <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Открыть всплывающее окно</a> <div data-role="popup" id="myPopup"> <p>Это всплывающее окно!</p> </div> </div> <div data-role="footer"> <h1>Footer</h1> </div> </div> </body> </html> |
В этом примере создается простое всплывающее окно с помощью элемента <div> и атрибута data-role="popup". Когда пользователь нажимает на ссылку "Открыть всплывающее окно", всплывающее окно появляется на экране с текстом "Это всплывающее окно!".
Обратите внимание, что вам также понадобятся ссылки на CSS- и JavaScript-файлы jQuery Mobile, чтобы код работал должным образом.
@francis_schuster
Для создания всплывающего окна (popup) в jQuery Mobile нужно выполнить следующие шаги:
- Создать HTML разметку для всплывающего окна:
1 2 3 |
<div data-role="popup" id="myPopup"> <p>This is my popup!</p> </div> |
Здесь мы создали элемент с атрибутом data-role="popup", который указывает на то, что это всплывающее окно.
- Добавить ссылку или кнопку, которая будет вызывать всплывающее окно:
1
|
<a href="#myPopup" data-rel="popup" class="ui-btn ui-corner-all ui-shadow">Open popup</a> |
Здесь мы создали ссылку с атрибутом data-rel="popup", который указывает на то, что она открывает всплывающее окно с идентификатором myPopup.
- Инициализировать всплывающее окно с помощью jQuery Mobile:
1 2 3 |
$(document).ready(function() {
$('#myPopup').popup();
});
|
Здесь мы инициализируем всплывающее окно с помощью метода popup().
Готово! Теперь при клике на ссылку или кнопку появится всплывающее окно с текстом "This is my popup!".