Cách tạo một popup đơn giản bằng jQuery

Tôi đang thiết kế một trang web. Khi chúng tôi nhấp vào nội dung của thư có tên div, làm cách nào tôi có thể hiển thị cửa sổ bật lên có chứa email và hộp văn bản nhãn?

Đầu tiên CSS - điều chỉnh cái này theo cách bạn thích:

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

Và 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);
};

Và cuối cùng là 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>

Dưới đây là một bản demo và thực hiện jsfiddle.

Tùy thuộc vào tình huống bạn có thể muốn tải nội dung bật lên thông qua cuộc gọi ajax. Tốt nhất nên tránh điều này nếu có thể vì nó có thể khiến người dùng chậm trễ đáng kể hơn trước khi xem nội dung. Ở đây có một vài thay đổi mà bạn sẽ muốn thực hiện nếu bạn thực hiện phương pháp này.

HTML trở thành:

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

Và ý tưởng chung về JavaScript trở thành:

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

Kiểm tra hộp thoại UI UI . Bạn sẽ sử dụng nó như thế này:

JQuery:

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

Đánh dấu:

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

Làm xong!

Hãy nhớ rằng đó là trường hợp sử dụng đơn giản nhất, tôi khuyên bạn nên đọc tài liệu để có ý tưởng tốt hơn về những gì có thể được thực hiện với nó.

Tôi sử dụng một plugin jQuery có tên là ColorBox .

1. Rất dễ sử dụng
2. nhẹ
3. tùy chỉnh
4. hộp thoại bật lên đẹp nhất tôi đã thấy cho jQuery chưa

Hãy dùng thử Magnificent Popup , nó phản hồi nhanh và trọng lượng chỉ khoảng 3KB.

Truy cập url này

Trình diễn hộp thoại UI Jquery

Tôi nghĩ rằng đây là một hướng dẫn tuyệt vời để viết một cửa sổ bật lên jquery đơn giản. Thêm vào đó trông rất đẹp

Có một ví dụ hay, đơn giản về chính xác điều này, tại đây: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

Plugin bật lên cực kỳ nhẹ Modal. DỄ DÀNG - http://welbour.com/labs/popelt/

Nó rất nhẹ, hỗ trợ các cửa sổ bật lên lồng nhau, hướng đối tượng, hỗ trợ các nút động, đáp ứng và nhiều hơn nữa. Bản cập nhật tiếp theo sẽ bao gồm các lần gửi biểu mẫu Popup Ajax, v.v.

Hãy sử dụng và phản hồi tweet.

Cửa sổ bật lên đơn giản bằng cách sử dụng html5 và 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();  
            };
        })();

Đây là một cửa sổ bật lên rất đơn giản:

<!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>

Giải pháp linh hoạt hơn có thể được tìm thấy trong hướng dẫn này: http://www.jacklmoore.com/notes/jquery-modal-tutorial/ Dưới đây close.png cho mẫu.

CHỈ NHẬP CSS POPUP! HÃY THỬ. DỄ DÀNG! Tôi nghĩ rằng đây là hack phổ biến trong tương lai

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