Dalam reka bentuk web, fungsi tetingkap timbul digunakan secara meluas Ia boleh membantu kami memaparkan maklumat segera, mengesahkan operasi maklumat, memaparkan kesan gambar, dll. kepada pengguna. Dalam jquery, terdapat banyak kaedah untuk melaksanakan tetingkap pop timbul Berikut akan memperkenalkan beberapa kaedah pelaksanaan biasa.
1. Gunakan komponen dialog UI jQuery
Dialog ialah komponen dalam perpustakaan UI jQuery, yang digunakan khas untuk mencipta tetingkap timbul. Untuk menggunakan komponen dialog, anda perlu memperkenalkan fail CSS dan JS pustaka UI jQuery terlebih dahulu Kemudian anda boleh mencipta tetingkap timbul asas melalui kod berikut:
<!-- 引入CSS文件 --> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <!-- 引入JS文件 --> <script src="http://code.jquery.com/jquery-1.12.4.js"></script> <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- 创建弹窗 --> <div id="dialog" title="提示信息"> <p>这里是提示内容</p> </div> <script> $(function() { $("#dialog").dialog(); }); </script>
Antaranya, elemen div. dengan ID "dialog" ialah tetingkap timbul Dalam bingkai luar, atribut tajuk ialah tajuk tetingkap timbul, dan kandungan dalam tag p ialah maklumat utama tetingkap timbul. Akhir sekali, dengan memanggil kaedah dialog(), anda boleh mencipta tetingkap pop timbul dengan gaya lalai.
Selain itu, anda boleh menyesuaikan gaya paparan dan fungsi tetingkap timbul melalui parameter konfigurasi kaedah dialog(). Sebagai contoh, kod berikut melaksanakan fungsi memaparkan butang sahkan dan batal dalam tetingkap pop timbul, dan mencetuskan fungsi panggil balik selepas mengklik butang sahkan:
<div id="dialog-confirm" title="确认操作"> <p>确认要执行操作吗?</p> </div> <script> $(function() { $("#dialog-confirm").dialog({ resizable: false, height: "auto", width: 400, modal: true, buttons: { "确认": function() { // 这里是确认按钮的回调函数 $( this ).dialog( "close" ); }, "取消": function() { $( this ).dialog( "close" ); } } }); }); </script>
2. Gunakan Fancybox pemalam jQuery
FancyBox ialah pemalam pop timbul jQuery yang ringan, bergantung rendah, dan sangat boleh disesuaikan. Anda boleh menggunakan Fancybox untuk melaksanakan pelbagai fungsi tetingkap timbul seperti tetingkap timbul gambar tunggal, tetingkap timbul berbilang gambar, tetingkap timbul media, pemuatan ajax, dsb.
Pertama, anda perlu memperkenalkan fail CSS dan JS bagi pemalam Fancybox Kemudian anda boleh mencipta tetingkap timbul dengan memanggil kaedah Fancybox() melalui kod berikut:
<!-- 引入CSS文件 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" /> <!-- 引入JS文件 --> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script> <!-- 创建图片弹窗 --> <a data-fancybox="gallery" href="image.jpg"> <img src="image.jpg" alt="图片说明"> </a> <!-- 创建ajax加载弹窗 --> <button data-fancybox data-type="ajax" data-src="ajax.html">点击加载弹窗</button> <script> $(function() { $("[data-fancybox]").fancybox({ //这里是配置参数 }); }); </script>
<button class="modal-toggle">点击弹出弹窗</button> <div class="modal"> <div class="modal-content"> <h3>弹窗标题</h3> <p>这里是弹窗内容</p> <button class="modal-close">关闭窗口</button> </div> </div> <style> .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; } .modal-content { max-width: 80%; background-color: white; padding: 20px; border-radius: 5px; text-align: center; } .modal-toggle { display: block; margin: 50px auto; width: 200px; height: 50px; color: white; font-size: 20px; background-color: #1ABC9C; border: none; border-radius: 5px; outline: none; cursor: pointer; } </style> <script> $(function() { $(".modal-toggle").click(function() { $(".modal").fadeIn(); }); $(".modal-close").click(function() { $(".modal").fadeOut(); }); }); </script>
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan tetingkap pop timbul dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!