Kotak Popup yang Sangat Sederhana - HTML, CSS, JavaScript

Kotak popup adalah cara paling berguna untuk menampilkan peringatan atau informasi penting lainnya kepada pengunjung situs web di banyak templat HTML5 . Pada artikel ini saya akan memandu Anda melalui pembuatan kotak popup yang sangat sederhana dengan overlay bayangan dan tombol tutup. Kami akan menerapkan ini menggunakan HTML, CSS, dan jQuery dalam waktu kurang dari 100 baris (bukan kode terkompresi).

Kotak dan bayangan disembunyikan ketika halaman dimuat, kita harus memicu suatu peristiwa, seperti klik tautan untuk menunjukkannya. 
Gunakan iframe di bawah ini untuk menguji demo langsung :

Kode HTML

Tambahkan tautan yang memicu kotak dan div yang berperilaku seperti bayangan kotak . Ini membungkus kotak yang sebenarnya dengan tombol tutup. The helper rentang digunakan untuk pusat kotak vertikal.

< A  class = "trigger_popup_fricc" > Klik disini untuk menampilkan popup </ a >

< Div  class = "hover_bkgr_fricc" > 
    < rentang  class = "pembantu" > </ rentang > 
    < div > 
        < div  class = "popupCloseButton" > X </ div > 
        < p > Add konten HTML < br /> dalam popup kotak! </ p > 
    </ div > 
</ div >

Kode CSS

/ * Kotak popup BEGIN * / 
.hover_bkgr_fricc {
     background : rgba ( 0,0,0, .4 );
    kursor : pointer ;
    display : tidak ada ;
    tinggi : 100 % ;
    posisi : tetap ;
    perataan teks : tengah ;
    atas : 0 ;
    lebar : 100 % ;
    z-indeks : 10000 ;
}
.hover_bkgr_fricc  .helper {
     display : inline-block ;
    tinggi : 100 % ;
    vertical-align : tengah ;
}
.hover_bkgr_fricc > div {
     background-color : #fff ;
    bayangan kotak : 10 px  10 px  60 px  # 555 ;
    display : inline-block ;
    tinggi : otomatis ;
    lebar maks : 551 px ;
    min-height : 100 px ;
    vertical-align : tengah ;
    lebar : 60 % ;
    posisi :relatif ;
    batas-jari-jari : 8 px ;
    padding : 15 px  5 % ;
}
.popupCloseButton {
     background-color : #fff ;
    perbatasan : 3 px  solid  # 999 ;
    batas-jari-jari : 50 px ;
    kursor : pointer ;
    display : inline-block ;
    font-family : arial ;
    font-weight : bold ;
    posisi : absolut ;
    atas : -20 px ;
    kanan : -20px ;
    ukuran font : 25 px ;
    garis-tinggi : 30 px ;
    lebar : 30 px ;
    tinggi : 30 px ;
    perataan teks : tengah ;
}
.popupCloseButton : hover {
     background-color : #ccc ;
}
.trigger_popup_fricc {
     cursor : pointer ;
    ukuran font : 20 px ;
    margin : 20 px ;
    display : inline-block ;
    font-weight : bold ;
}
/ * Kotak sembulan MULAI * /

Naskah

$ ( jendela ). memuat (function () {
     $ ( ".trigger_popup_fricc" ). klik (function () {
        $ ( '.hover_bkgr_fricc' ) .show ();
    });
    $ ( '.hover_bkgr_fricc' ). klik (fungsi () {
         $ ( '.hover_bkgr_fricc' ) .hide ();
    });
    $ ( '.popupCloseButton' ). klik (fungsi () {
         $ ( '.hover_bkgr_fricc' ) .hide ();
    });
});