Bagaimana untuk melaksanakan tetingkap pop timbul dalam jquery

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>

<.>Dalam kod di atas, teg pertama ialah Contoh tetingkap timbul gambar tunggal Atribut data-fancybox menunjukkan kumpulan gambar yang akan muncul dan atribut href ialah alamat fail imej. untuk dipaparkan dalam tetingkap pop timbul. Teg butang kedua ialah contoh tetingkap pop timbul pemuatan ajax, di mana atribut kotak fancy data dan jenis data masing-masing mewakili jenis tetingkap timbul dan kaedah pemuatan.

3. Gunakan CSS tulen untuk melaksanakan tetingkap timbul

Selain menggunakan pemalam JS, kami juga boleh mencapai kesan tetingkap timbul mudah melalui CSS tulen. Berikut ialah contoh tetingkap timbul CSS tulen asas:

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

Dalam kod sampel, kedudukan tetap dan kawalan atribut paparan CSS3 digunakan untuk mencapai kesan asas tetingkap timbul. Pada masa yang sama, kaedah fadeIn() dan fadeOut() jQuery juga digunakan untuk mencetuskan kemunculan dan penutupan tetingkap pop timbul. Sudah tentu, pembangun boleh melaraskan gaya dan fungsi tetingkap pop timbul secara fleksibel mengikut keperluan sebenar.

Ringkasnya, perkara di atas adalah beberapa cara untuk melaksanakan tetingkap timbul dalam jquery. Kaedah yang berbeza mempunyai senario terpakai yang berbeza Pembangun boleh memilih kaedah yang paling sesuai mengikut keperluan sebenar untuk mencapai kesan pop timbul yang sangat baik.

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!