Membuat PopUp Dengan Koding Yang Mudah

Pengertian Pop-Up adalah jendela yang muncul secara otomatis atau dengan batuan mengclick button, namun biasanya PopUp bisa sangat penting bagi website-website yang berdesign simple, agar bisa menyembuyikan dan menampilakan container jika dibutuhkan oleh user, seperti contact form, contact untuk mendaftar, contact untuk masuk, dan tombol share atau like.

Nah disini anda akan belajar bagaimana cara membuat tombol popup yang sederhana.

Untuk contohnya bisa anda lihat di Demo live

Pertama yang kita lakukan adalah membuat container dengan HTML

Untuk dibawah ini adalah code untuk tombol PopUpnya.

<a href="#" id="PopUp">PopUp</a>
  • 1.

Dan dibawah ini adalah code untuk Container PopUpnya.

<div id="container-popup">
        <div id="popup_box">
            <h1>PopUp by Indocodex</h1>
            <a href="#" id="popupBoxClose">Close</a>   
        </div>
    </div> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

Setelah kita buat HTMLnya kita buat juga style nya.

#PopUp {
    background-color: #B3D1FF;
    border: 1px solid #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 2px 3px #AAAAAA;
    color: #FFFFFF;
    display: inline-block;
    font-weight: bold;
    margin: 5px;
    cursor: pointer;
    position: relative;
    padding: 5px 20px 5px 40px;
}
#PopUp:before {
    content: "< >";
    left: 10px;
    position: absolute;
    transform: rotate(90deg);
}
#container-popup{
    left: 50%;
    position: fixed;
    top: 50%;
    background-color: rgba(0, 0, 0, 0);
    transition: 0.5s;
    height: 0;
    width: 0;
    overflow: hidden;
    opacity:0;
    display: block;
    z-index: 999;
}
#popup_box {
    top: 20%; 
    background-color: #fff;
    border: 1px solid #EEEEEE;
    box-shadow: 0 0 5px #AAAAAA;
    height: 300px;
    width: 350px;
    position: relative;
    margin:0 auto;
    z-index: 999;
    padding: 1.5%;
}
#popupBoxClose {
    font-size:13px;  
    right:-15px;  
    border-radius: 50%;
    top:-15px;  
    height:30px;
    width:30px;
    position:absolute; 
    display: inline;
    color:transparent;
    background-color:#BF5567;
    border: 5px solid #BF5567;
    box-shadow: 0 0 10px 1px #AAAAAA;
}
a{
    text-decoration: none;
}
#popupBoxClose:before, #popupBoxClose:after {
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 0 3px 1px #FFFFFF;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    top: 45%;
    transform: rotate(45deg);
    width: 100%;
}
#popupBoxClose:after {
    transform: rotate(-45deg);
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.

Untuk yang terakhir kita membuat script dengan bantuan JQuery.

jika anda belum punya bisa download atau memasang code dibawah ini

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
  • 1.

Setelah anda mempunyai jquery, maka letakan code ini di bawahnya.


    $(document).ready( function() {
        $('#popupBoxClose').click( function() {           
            loadPopupBox('#container-popup');
        });
        $('#PopUp').click( function() {  
            loadPopupBox('#container-popup');
        });
        function loadPopupBox(container) {
            $(container).toggleClass("active-popup");
            var width = $(window).width();
            var height = $(window).height();
            if($(container).hasClass("active-popup")){
                $(container).css({
                    "width":width,
                    "height":height,
                    "left":"0",
                    "top":"0",
                    "opacity":"1",
                    "opacity":"1",
                    "background-color":"rgba(0, 0, 0, 0.2)",
                });
                }else{
                $(container).css({
                    "width":"0",
                    "height":"0",
                    "left":"50%",
                    "top":"50%",
                    "opacity":"0",
                    "background-color":"rgba(0, 0, 0, 0)",
                });
            }
        }
    });
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.

Demo live

Selamat Mencoba !!