PopUp tag Div dengan tombol tutup menggunakan JavaScript dan DHTML

PopUp Tag DIV yang sangat umum di gunakan di website, Tag popUp div dapat digunakan untuk menampilkan beberapa informasi penting atau fokus pada beberapa kontentertentu tidak pada seluruh halaman dan kode ini sangat mudah digunakan karna menggunakan DHTML & kode JavaScript untuk tag popUp dengan menggunakan tombol tutup DIV dan latarbelakang halaman transparan yang menonaktifkan setiap klik pada jendela induknya.

Penerapan script ini sedemikian rupa yang dapat anda lakukan menempatkan sejumlah popUP div pada satu halaman dengan id yang berbeda, penutupan tombol untuk setiap muncul div tag secara otomatis yang dihasilkan oleh Script.

Trik CSS yang memiliki properti bernama visibilitas yang dapat digunakan untuk menampilkan atau menyembunyikan identitas apapun yang di terapkan. tag popUp DIV ini dapat di tempatkan di manapun dalam kode HTML. dan ketika PopUP Link / Klik. visibilitas PopUP div tag diatur untuk terlihat (awalnya tersembunyi) dan sejajar di tengah halaman dengan menggunakan javaScript sebelumnya untuk pusat menyelaraskan tag div di pusat halaman. kode PopUP ini juga menggunakan latarbelakang tag div transparan yang meliputi latarbelakang yang tersisa dan menonaktifkan mengklik pada jendela popUp (X), hanya satu bacground transparan untuk setiap halaman dan berlapis di bawah tag popup div menggunakan properti z-index CSS.

ada dua fungsi JavaScript yang digunakan di sini satu untuk membuka tag div dan menyelaraskan ke pusat halaman dan fungsi kedua adalah untuk menyembunyikan popup dan latarbelakang.
Popup Div JavaScript Code:

<script language="javascript">
function openpopup(id){
      //Calculate Page width and height
      var pageWidth = window.innerWidth;
      var pageHeight = window.innerHeight;
      if (typeof pageWidth != "number"){
      if (document.compatMode == "CSS1Compat"){
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
      } else {
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
      }
      }
      //Make the background div tag visible...
      var divbg = document.getElementById('bg');
      divbg.style.visibility = "visible";

      var divobj = document.getElementById(id);
      divobj.style.visibility = "visible";
      if (navigator.appName=="Microsoft Internet Explorer")
      computedStyle = divobj.currentStyle;
      else computedStyle = document.defaultView.getComputedStyle(divobj, null);
      //Get Div width and height from StyleSheet
      var divWidth = computedStyle.width.replace('px', '');
      var divHeight = computedStyle.height.replace('px', '');
      var divLeft = (pageWidth - divWidth) / 2;
      var divTop = (pageHeight - divHeight) / 2;
      //Set Left and top coordinates for the div tag
      divobj.style.left = divLeft + "px";
      divobj.style.top = divTop + "px";
      //Put a Close button for closing the popped up Div tag
      if(divobj.innerHTML.indexOf("closepopup('" + id +"')") < 0 )
      divobj.innerHTML = "<a href=\"#\" onclick=\"closepopup('" + id +"')\"><span class=\"close_button\">X</span></a>" + divobj.innerHTML;
}
function closepopup(id){
      var divbg = document.getElementById('bg');
      divbg.style.visibility = "hidden";
      var divobj = document.getElementById(id);
      divobj.style.visibility = "hidden";
}
</script>

CSS Code for the Popup Div tag, Close Button and Background Div tag:

<style type="text/css">

</style>

HTML Code for popup div tags:

<body>
<a href="#" onclick="openpopup('popup1')">Open Popup Div #1</a>
<div id="popup1" class="popup">
Popup Div Tag #1 content goes here!
</div>

<a href="#" onclick="openpopup('popup2')">Open Popup Div #2</a>
<div id="popup2" class="popup">
Popup Div Tag #2 content goes here!
</div>

<div id="bg" class="popup_bg"></div>
</body>

Setiap popUp window pada halaman harus memiliki id yang berbeda dan bahwa id yang sama harus digunakan dalam onclik (satu halaman) . anda bahkan dapat menempatkan kontainer div lain dalam popUP div atau menggunakan iframe untuk menampilkan konyen dari halaman lain.
sekian selamat mencoba moga berhasil.

Anda baru saja membaca artikel tentang - PopUp tag Div dengan tombol tutup menggunakan JavaScript dan DHTML. Silahkan baca artikel berikutnya Tentang - - Jangan lupa g+1 / fb / twit :)