Як генерувати просте спливаюче вікно за допомогою jQuery

Я розробляю веб-сторінку. Коли ми натискаємо вміст поштової пошти з назвою div, як я можу показати спливаюче вікно, що містить електронну пошту та текстове поле з міткою?

Спочатку 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 . Ви б використовували це так:

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

Я думаю, що це чудовий підручник із написання простого спливаючого вікна jquery. Плюс це виглядає дуже красиво

Є хороший, простий приклад саме цього, тут: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

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

Він легкий, підтримує вкладені спливаючі вікна, орієнтовані на об’єкти, підтримує динамічні кнопки, чуйність та багато іншого. Наступне оновлення включатиме подання форми Popup 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/ Ось близько.png для вибірки.

ТОЛЬКО CSS POPUP LOGIC! Спробуй це зробити. ЛЕГКО! Я думаю, що цей 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);
}