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?
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.
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.
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>
<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.
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
Sangat mudah digunakan
ringan
dapat disesuaikan
dialog popup terbaik yang pernah saya lihat untuk jQuery
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>SampleDialog!</h3><p>Lorem ipsum dolor sit amet</p><button id="exit">CloseDialog</button></dialog><button id="show">ShowDialog</button>
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 modalreturnfunction(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>
Jawaban:
Pertama-tama CSS - sesuaikan ini sesuka Anda:
Dan JavaScript:
Dan akhirnya html:
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:
Dan ide umum dari JavaScript menjadi:
sumber
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js"></script>
Lihat Dialog UI jQuery . Anda akan menggunakannya seperti ini:
JQuery:
Markup:
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.
sumber
Saya menggunakan plugin jQuery yang disebut ColorBox , itu
sumber
Coba Magnific Popup , responsif dan bobotnya hanya sekitar 3KB.
sumber
Kunjungi url ini
Demo Dialog Jquery UI
sumber
Saya pikir ini adalah tutorial yang bagus untuk menulis popup jquery sederhana. Plus itu terlihat sangat indah
sumber
Ada contoh sederhana yang bagus tentang ini, di sini: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
sumber
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.
sumber
Jendela sembulan sederhana dengan menggunakan html5 dan javascript.
html: -
JavaScript: -
sumber
TypeError: dialog.show is not a function
kesalahan. Bisakah Anda memasukkan JSFiddle?Ini adalah popup yang sangat sederhana:
Solusi yang lebih fleksibel dapat ditemukan dalam tutorial ini: http://www.jacklmoore.com/notes/jquery-modal-tutorial/ Berikut ini adalah close.png untuk sampel.
sumber
HANYA LOGIK POPUP CSS! COBA LAKUKAN. MUDAH! Saya pikir ini akan menjadi hack populer di masa depan
sumber