Как создать простое всплывающее окно с помощью jQuery

204

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

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

11 ответов

249
Лучший ответ

Что-то такое простое не требует плагина. Это может выглядеть как много кода, но это очень просто.

Сначала 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;
});
  • 0
    Работает, спасибо. Но я собираюсь включить еще одну кнопку вызова регистра. когда она нажата, должна появиться форма регистрации. Для этого я включил ту же функцию и изменил имя идентификаторов и классов. Проблема в том, что когда я нажимаю кнопку закрытия формы регистрации, она переключает контактную форму. Нужна помощь @ Джейсон Дэвис
  • 1
    чтобы удалить HTML, который вы добавляете при закрытии, измените метод close на $ (". close"). live ('click', function () {$ (". pop"). slideFadeToggle (); $ ("# contact") .removeClass ("selected"); $ (". pop"). remove (); // добавить это ... return false;}); это исправит проблему, если вы нажмете на ссылку несколько раз, прежде чем закрыть всплывающее окно. хороший ответ, кстати, гладкий и простой ...
Показать ещё 20 комментариев
95

Откроется jQuery UI Dialog. Вы бы использовали его следующим образом:

jQuery:

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

Разметка:

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

Готово!

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

  • 0
    Кроме Jquery, должен ли я включить какой-либо плагин? @Karim
  • 6
    @Rajasekar - вам нужно будет загрузить пакет jQuery UI и, по крайней мере, включить ui.core.js и ui.dialog.js, чтобы получить диалог. Если вы хотите, чтобы диалог был перетаскиваемым и / или изменяемым, вам нужно будет включить ui.draggable.js и ui.resizable.js.
Показать ещё 1 комментарий
24

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

  • Очень прост в использовании
  • легкий
  • настраиваемый
  • самый приятный всплывающий диалог, который я видел для jQuery еще
8

Попробуйте Magnific Popup, он реагирует и весит около 3 КБ.

8

Посетите этот URL

Демо-версии JQuery UI

4

Я думаю, что это отличный учебник по написанию простого всплывающего окна jquery. Плюс это выглядит очень красивый

3

Чрезвычайно легкий модульный всплывающий плагин. POPELT - http://welbour.com/labs/popelt/

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

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

3

Существует хороший, простой пример именно этого: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

  • 0
    Кроме Jquery, должен ли я включить какой-либо плагин? @Karim
1

Простое всплывающее окно с помощью 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();  
            };
        })();
  • 0
    Я получаю TypeError: dialog.show is not a function ошибкой TypeError: dialog.show is not a function . Не могли бы вы включить JSFiddle?
0

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

            <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);
}
  • 0
    Это не близко!
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 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 для образца.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню