Cara membuat popup sederhana menggunakan jQuery

Saya sedang mendesain halaman web. Ketika kami mengklik konten div dengan nama mail, bagaimana saya bisa menampilkan jendela sembulan yang berisi email label dan kotak teks?

Pertama-tama CSS - sesuaikan ini sesuka Anda:

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

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

Dan akhirnya 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>

Berikut ini adalah demo dan implementasi jsfiddle.

Tergantung pada situasi Anda mungkin ingin memuat konten popup melalui panggilan ajax. Sebaiknya hindari ini jika memungkinkan karena dapat memberikan pengguna penundaan yang lebih signifikan sebelum melihat konten. Berikut beberapa perubahan yang ingin Anda buat jika Anda mengambil pendekatan ini.

HTML menjadi:

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

Dan ide umum dari JavaScript menjadi:

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

Lihat Dialog UI jQuery . Anda akan menggunakannya seperti ini:

JQuery:

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

Markup:

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

Selesai!

Ingatlah bahwa itu tentang use-case paling sederhana yang ada, saya sarankan membaca dokumentasi untuk mendapatkan ide yang lebih baik dari apa yang bisa dilakukan dengan itu.

Saya menggunakan plugin jQuery yang disebut ColorBox , itu

1. Sangat mudah digunakan
2. ringan
3. dapat disesuaikan
4. dialog popup terbaik yang pernah saya lihat untuk jQuery

Coba Magnific Popup , responsif dan bobotnya hanya sekitar 3KB.

Kunjungi url ini

Demo Dialog Jquery UI

Saya pikir ini adalah tutorial yang bagus untuk menulis popup jquery sederhana. Plus itu terlihat sangat indah

Ada contoh sederhana yang bagus tentang ini, di sini: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

Plugin popup Modal Sangat Ringan. POPELT - http://welbour.com/labs/popelt/

Ini ringan, mendukung popup bersarang, berorientasi objek, mendukung tombol dinamis, responsif, dan banyak lagi. Pembaruan berikutnya akan mencakup pengiriman formulir Popup Ajax dll.

Jangan ragu untuk menggunakan dan mentweet umpan balik.

Jendela sembulan sederhana dengan menggunakan html5 dan 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();  
            };
        })();

Ini adalah popup yang sangat sederhana:

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

Solusi yang lebih fleksibel dapat ditemukan dalam tutorial ini: http://www.jacklmoore.com/notes/jquery-modal-tutorial/ Berikut ini adalah close.png untuk sampel.

HANYA LOGIK POPUP CSS! COBA LAKUKAN. MUDAH! Saya pikir ini akan menjadi hack populer di masa depan

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