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

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

11 211
javascript css jquery android-popupwindow ajax

11 ответов:

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

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

проверить jQuery UI Dialog. Вы бы использовали его так:

jQuery:

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

разметка:

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

готово!

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

96

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

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

по этой ссылке

в jQuery диалоговое окно пользовательского интерфейса Демос

8

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

8

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

4

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

3

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

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

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

3

простое всплывающее окно с помощью 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();  
            };
        })();
1

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

<!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/ Вот это закрыть.png для примера.

0

ТОЛЬКО CSS POPUP ЛОГИКА! ПОПРОБУЙ ЭТО СДЕЛАТЬ . Полегче! Я думаю, что это mybe быть Хак популярным в будущем

            <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