Cara membuat popup sederhana menggunakan jQuery

217

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?

Rajasekar
sumber
1
Saya menemukan jawaban ini sangat berguna untuk peringatan cepat tanpa menyentuh HTML atau CSS yang ada. Itu membuat dan menampilkan div hanya menggunakan jQuery dari js.
mabi

Jawaban:

241

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;
});
Andy Gaskell
sumber
Ini Bekerja, Terima kasih. Tapi aku akan memasukkan register panggilan tombol lain. ketika diklik, formulir pendaftaran akan muncul. Untuk itu saya menyertakan fungsi yang sama dan mengubah nama id dan kelas. Masalahnya adalah ketika saya mengklik tombol tutup pada formulir pendaftaran, itu mematikan formulir kontak. Butuh bantuan @jason Davis
Rajasekar
1
untuk menghapus html yang Anda tambahkan pada tutup ubah metode tutup menjadi $ (". close"). live ('click', function () {$ (". pop"). slideFadeToggle (); $ ("# contact") .removeClass ("terpilih"); $ (". pop"). hapus (); // tambahkan ini ... return false;}); ini akan memperbaiki masalah yang Anda dapatkan saat mengklik tautan lebih dari satu kali sebelum menutup popup.
Ngomong
10
@yahelc Coba klik "Daftar" lebih dari satu kali berturut-turut, lalu klik "Batal". Uh-oooohhhh.
AVProgrammer
Saya tidak begitu setuju pada bagian "kode hebat". Banyak konten yang diubah ke javascript. Ya kita semua memiliki javascript di browser kami di sana hari ini, tetapi itu bukan cara yang tepat untuk melakukan web. HTML untuk konten, js untuk "makeup". Jawaban Karim79 lebih baik dari perspektif saya. Sertakan markup Anda di HTML tempatnya, sembunyikan, dan tunjukkan saja dan angkat sebagai popup. Solusi yang jauh lebih bersih daripada mencetak banyak HTML langsung dari javascript. Anda tidak harus menggunakan jQueryUI jika Anda tidak membutuhkannya, ada sejuta cara untuk menaruh beberapa konten dalam sembulan
ZolaKt
12
Menurut situs web jQuery , Pada jQuery 1.7, metode .live () tidak digunakan lagi. Gunakan .on () untuk melampirkan penangan acara. Pengguna versi jQuery yang lebih lama harus menggunakan .delegate () untuk preferensi .live (). . Jadi saya mengganti. Tinggal dengan .on . Klik di sini untuk melihat versi kode Andy yang lebih umum . Juga, saya menggunakan tautan CDN untuk versi jQuery terbaru di halaman yang sebenarnya<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
vulcan raven
98

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.

karim79
sumber
Selain Jquery apakah saya harus memasukkan plugin apa saja ?? @Karim
Rajasekar
8
@Rajasekar - Anda harus mengunduh bundel jQuery UI dan setidaknya menyertakan ui.core.js dan ui.dialog.js untuk mendapatkan Dialog. Jika Anda ingin dialog dapat diseret dan / atau dapat diubah ukurannya maka Anda harus menyertakan ui.draggable.js dan ui.resizable.js.
karim79
6
Hmm. Akan menjadi jawaban yang lebih baik dengan jsfiddle.
Bryce
23

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
JasonDavis
sumber
9

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

Marvin3
sumber
4

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

andy boot
sumber
3

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.

Elton Jain
sumber
2

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();  
            };
        })();
Arshid KV
sumber
Saya mendapatkan TypeError: dialog.show is not a functionkesalahan. Bisakah Anda memasukkan JSFiddle?
Magiranu
0

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.

John29
sumber
0

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);
}
zloctb
sumber
Itu tidak menutup!
vy32