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

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

Сначала 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;
});

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

JQuery:

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

Разметка:

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

Готово!

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

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

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

Попробуйте 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: -

    <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();  
            };
        })();

Вот очень простое всплывающее окно:

<!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 для примера.

ТОЛЬКО 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);
}