Как создать простое всплывающее окно, используя jQuery

217

Я проектирую веб-страницу. Когда мы нажимаем на содержимое div с именем mail, как я могу показать всплывающее окно, содержащее ярлык электронной почты и текстовое поле?

Rajasekar
источник
1
Я нашел этот ответ очень полезным для быстрого оповещения, не касаясь существующего HTML или CSS. Он создает и показывает div, просто используя jQuery из js.
Маби

Ответы:

241

Сначала CSS - настройте это так, как вам нравится:

a.selected {
  background-color:#1F75CC;
  color:white;
  z-index:100;
}

.messagepop {
  background-color:#FFFFFF;
  border:1px solid #999999;
  cursor:default;
  display:none;
  margin-top: 15px;
  position:absolute;
  text-align:left;
  width:394px;
  z-index:50;
  padding: 25px 25px 20px;
}

label {
  display: block;
  margin-bottom: 3px;
  padding-left: 15px;
  text-indent: -15px;
}

.messagepop p, .messagepop.div {
  border-bottom: 1px solid #EFEFEF;
  margin: 8px 0;
  padding-bottom: 8px;
}

И JavaScript:

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

$(function() {
  $('#contact').on('click', function() {
    if($(this).hasClass('selected')) {
      deselect($(this));               
    } else {
      $(this).addClass('selected');
      $('.pop').slideFadeToggle();
    }
    return false;
  });

  $('.close').on('click', function() {
    deselect($('#contact'));
    return false;
  });
});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};

И, наконец, HTML:

<div class="messagepop pop">
  <form method="post" id="new_message" action="/messages">
    <p><label for="email">Your email or name</label><input type="text" size="30" name="email" id="email" /></p>
    <p><label for="body">Message</label><textarea rows="6" name="body" id="body" cols="35"></textarea></p>
    <p><input type="submit" value="Send Message" name="commit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p>
  </form>
</div>

<a href="/contact" id="contact">Contact Us</a>

Вот демонстрация и реализация jsfiddle.

В зависимости от ситуации вы можете загружать всплывающее содержимое с помощью ajax-вызова. Лучше избегать этого, если это возможно, так как это может дать пользователю более значительную задержку перед просмотром контента. Здесь пара изменений, которые вы захотите сделать, если вы воспользуетесь этим подходом.

HTML становится:

<div>
    <div class="messagepop pop"></div> 
    <a href="/contact" id="contact">Contact Us</a>
</div>

И общая идея JavaScript становится:

$("#contact").on('click', function() {
    if($(this).hasClass("selected")) {
        deselect();               
    } else {
        $(this).addClass("selected");
        $.get(this.href, function(data) {
            $(".pop").html(data).slideFadeToggle(function() { 
                $("input[type=text]:first").focus();
            });
        }
    }
    return false;
});
Энди Гаскелл
источник
Работает, спасибо. Но я собираюсь включить еще одну кнопку вызова регистра. когда она нажата, должна появиться форма регистрации. Для этого я включил ту же функцию и изменил имя идентификаторов и классов. Проблема в том, что когда я нажимаю кнопку закрытия формы регистрации, она переключает контактную форму. Нужна помощь @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>
текущей
98

Проверьте JQuery UI Диалог . Вы бы использовали это так:

JQuery:

$(document).ready(function() {
    $("#dialog").dialog();
});

Разметка:

<div id="dialog" title="Dialog Title">I'm in a dialog</div>

Готово!

Имейте в виду, что это самый простой вариант использования, я бы посоветовал прочитать документацию, чтобы получить лучшее представление о том, что можно с этим сделать.

karim79
источник
Кроме Jquery, должен ли я включить какой-либо плагин? @Karim
Раджасекар
8
@Rajasekar - Вам нужно будет загрузить пакет jQuery UI и, по крайней мере, включить ui.core.js и ui.dialog.js, чтобы получить диалог. Если вы хотите, чтобы диалог был перетаскиваемым и / или изменяемым, то вам нужно будет включить ui.draggable.js и ui.resizable.js.
karim79
6
Хм. Было бы лучше ответить с jsfiddle.
Брайс
23

Я использую плагин jQuery под названием ColorBox , это

  1. Очень прост в использовании
  2. легкий
  3. настраиваемый
  4. самый хороший всплывающий диалог, который я видел для jQuery еще
JasonDavis
источник
3

Очень легкий модальный всплывающий плагин. ПОПЕЛЬТ - http://welbour.com/labs/popelt/

Это легкий, поддерживает вложенные всплывающие окна, объектно-ориентированные, поддерживает динамические кнопки, реагировать и многое другое. Следующее обновление будет включать в себя всплывающие формы Ajax и т. Д.

Не стесняйтесь использовать и чирикать отзывы.

Элтон Джейн
источник
2

Простое всплывающее окно с использованием html5 и javascript.

HTML: -

    <dialog id="window">  
     <h3>Sample Dialog!</h3>  
     <p>Lorem ipsum dolor sit amet</p>  
     <button id="exit">Close Dialog</button>
    </dialog>  

  <button id="show">Show Dialog</button> 

JavaScript: -

   (function() {  

            var dialog = document.getElementById('window');  
            document.getElementById('show').onclick = function() {  
                dialog.show();  
            };  
            document.getElementById('exit').onclick = function() {  
                dialog.close();  
            };
        })();
Аршид К.В.
источник
Я получаю 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 modal
                return function (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>

Более гибкое решение можно найти в этом руководстве: http://www.jacklmoore.com/notes/jquery-modal-tutorial/ Вот пример close.png для примера.

John29
источник
0

ТОЛЬКО CSS POPUP LOGIC! ПОПРОБУЙТЕ ЭТО. ЛЕГКО! Я думаю, что это может быть популярным в будущем

            <a href="#openModal">OPEN</a>

            <div id="openModal" class="modalDialog">
                <div>
                    <a href="#close"  class="close">X</a>
                    <h2>MODAL</h2>

                </div>
            </div>


.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    display: none;
    pointer-events: none;
}

.modalDialog:target {
    display: block;
    pointer-events: auto;
}

.modalDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
zloctb
источник
Это не близко!
vy32