Как создать простое всплывающее окно, используя jQuery
217
Я проектирую веб-страницу. Когда мы нажимаем на содержимое div с именем mail, как я могу показать всплывающее окно, содержащее ярлык электронной почты и текстовое поле?
Я нашел этот ответ очень полезным для быстрого оповещения, не касаясь существующего HTML или CSS. Он создает и показывает div, просто используя jQuery из js.
Маби
Ответы:
241
Сначала CSS - настройте это так, как вам нравится:
В зависимости от ситуации вы можете загружать всплывающее содержимое с помощью ajax-вызова. Лучше избегать этого, если это возможно, так как это может дать пользователю более значительную задержку перед просмотром контента. Здесь пара изменений, которые вы захотите сделать, если вы воспользуетесь этим подходом.
Работает, спасибо. Но я собираюсь включить еще одну кнопку вызова регистра. когда она нажата, должна появиться форма регистрации. Для этого я включил ту же функцию и изменил имя идентификаторов и классов. Проблема в том, что когда я нажимаю кнопку закрытия формы регистрации, она переключает контактную форму. Нужна помощь @jason Davis
Раджасекар
1
чтобы удалить HTML, который вы добавляете при закрытии, измените метод close на $ (". close"). live ('click', function () {$ (". pop"). slideFadeToggle (); $ ("# contact") .removeClass ("selected"); $ (". pop"). remove (); // добавить это ... return false;}); это исправит проблему, если вы нажмете на ссылку более одного раза перед закрытием всплывающего окна. хороший ответ, кстати, гладко и просто ...
Jonx
10
@yahelc Попробуйте нажать «Зарегистрироваться» несколько раз подряд, затем нажмите «Отмена». Э - э-oooohhhh.
AVProgrammer
Я не совсем согласен с «отличным кодом». Большая часть контента жестко закодирована в javascript. Да, у нас все есть javascript в наших браузерах там, но просто это не правильный способ сделать веб. HTML для контента, JS для «макияжа». Karim79 ответ лучше с моей точки зрения. Включите вашу разметку в HTML, где она принадлежит, скройте ее, и просто покажите и выведите в всплывающее окно. Гораздо более чистое решение, чем печать большого количества HTML прямо из JavaScript. Вам не нужно использовать jQueryUI, если он вам не нужен, есть миллион способов поместить контент во всплывающее окно
ZolaKt
12
Согласно веб-сайту jQuery , по состоянию на jQuery 1.7, метод .live () устарел. Используйте .on (), чтобы прикрепить обработчики событий. Пользователи старых версий jQuery должны использовать .delegate () вместо .live (). , Поэтому я заменил .Live на .on . Нажмите здесь, чтобы увидеть более общую версию кода Энди . Кроме того, я использовал ссылку CDN для более свежей версии jQuery на <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
Готово!
Имейте в виду, что это самый простой вариант использования, я бы посоветовал прочитать документацию, чтобы получить лучшее представление о том, что можно с этим сделать.
Кроме Jquery, должен ли я включить какой-либо плагин? @Karim
Раджасекар
8
@Rajasekar - Вам нужно будет загрузить пакет jQuery UI и, по крайней мере, включить ui.core.js и ui.dialog.js, чтобы получить диалог. Если вы хотите, чтобы диалог был перетаскиваемым и / или изменяемым, то вам нужно будет включить ui.draggable.js и ui.resizable.js.
karim79
6
Хм. Было бы лучше ответить с jsfiddle.
Брайс
23
Я использую плагин jQuery под названием ColorBox , это
Очень прост в использовании
легкий
настраиваемый
самый хороший всплывающий диалог, который я видел для jQuery еще
Это легкий, поддерживает вложенные всплывающие окна, объектно-ориентированные, поддерживает динамические кнопки, реагировать и многое другое. Следующее обновление будет включать в себя всплывающие формы Ajax и т. Д.
Простое всплывающее окно с использованием html5 и javascript.
HTML: -
<dialog id="window"><h3>SampleDialog!</h3><p>Lorem ipsum dolor sit amet</p><button id="exit">CloseDialog</button></dialog><button id="show">ShowDialog</button>
Я получаю TypeError: dialog.show is not a functionошибку. Не могли бы вы включить JSFiddle?
Magiranu
0
Вот очень простое всплывающее окно:
<!DOCTYPE html><html><head><style>#modal {
position:absolute;
background:gray;
padding:8px;}#content {
background:white;
padding:20px;}#close {
position:absolute;
background:url(close.png);
width:24px;
height:27px;
top:-7px;
right:-7px;}</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>var modal =(function(){// Generate the HTML and add it to the document
$modal = $('<div id="modal"></div>');
$content = $('<div id="content"></div>');
$close = $('<a id="close" href="#"></a>');
$modal.hide();
$modal.append($content, $close);
$(document).ready(function(){
$('body').append($modal);});
$close.click(function(e){
e.preventDefault();
$modal.hide();
$content.empty();});// Open the modalreturnfunction(content){
$content.html(content);// Center the modal in the viewport
$modal.css({
top:($(window).height()- $modal.outerHeight())/2,
left:($(window).width()- $modal.outerWidth())/2});
$modal.show();};}());// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
$('a#popup').click(function(e){
modal("<p>This is popup's content.</p>");
e.preventDefault();});});</script></head><body><a id='popup' href='#'>Simple popup</a></body></html>
Ответы:
Сначала CSS - настройте это так, как вам нравится:
И JavaScript:
И, наконец, HTML:
Вот демонстрация и реализация jsfiddle.
В зависимости от ситуации вы можете загружать всплывающее содержимое с помощью ajax-вызова. Лучше избегать этого, если это возможно, так как это может дать пользователю более значительную задержку перед просмотром контента. Здесь пара изменений, которые вы захотите сделать, если вы воспользуетесь этим подходом.
HTML становится:
И общая идея JavaScript становится:
источник
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
Проверьте JQuery UI Диалог . Вы бы использовали это так:
JQuery:
Разметка:
Готово!
Имейте в виду, что это самый простой вариант использования, я бы посоветовал прочитать документацию, чтобы получить лучшее представление о том, что можно с этим сделать.
источник
Я использую плагин jQuery под названием ColorBox , это
источник
Попробуйте Magnific Popup , он отзывчивый и весит всего около 3 КБ.
источник
Посетите этот URL
JQuery UI Диалог Демо
источник
Я думаю, что это отличный урок по написанию простого jquery-всплывающего окна. Плюс выглядит очень красиво
источник
Вот хороший, простой пример именно этого, здесь: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
источник
Очень легкий модальный всплывающий плагин. ПОПЕЛЬТ - http://welbour.com/labs/popelt/
Это легкий, поддерживает вложенные всплывающие окна, объектно-ориентированные, поддерживает динамические кнопки, реагировать и многое другое. Следующее обновление будет включать в себя всплывающие формы Ajax и т. Д.
Не стесняйтесь использовать и чирикать отзывы.
источник
Простое всплывающее окно с использованием html5 и javascript.
HTML: -
JavaScript: -
источник
TypeError: dialog.show is not a function
ошибку. Не могли бы вы включить JSFiddle?Вот очень простое всплывающее окно:
Более гибкое решение можно найти в этом руководстве: http://www.jacklmoore.com/notes/jquery-modal-tutorial/ Вот пример close.png для примера.
источник
ТОЛЬКО CSS POPUP LOGIC! ПОПРОБУЙТЕ ЭТО. ЛЕГКО! Я думаю, что это может быть популярным в будущем
источник