ทำ Popup แบบ Div ครับ

ทำ Popup แบบ Div ครับ



วันนี้ขอนำเสนอเทคนิคการทำ Div Popup ครับ 

จุดเด่นของเนื้อหานี้คือการที่มี Popup อยู่ บริเวณที่เราคลิกครับ 
สามารถนำไปประยุกต์ใช้ได้มากมายครับ 
เชิญเลยครับ

ส่วนนี้ไปวางไว้ใน Tag <head>...</head>
<style type="text/css" media="all">
body {
 font-family:Helvetica, Arial, sans-serif; 
 font-size:11px;
}
 #content_popup{
 background-color:#ffffff;
 border:1px solid #000000;
 width:400px;
 height:375px;
 display:block;
 position:absolute;
 padding:5px;
 }
 #content_popup .close_popup{
 text-align:right;
 width:400px;
 height:25px;
 clear:both;
 }
 #content_popup .close_popup a{
 text-decoration:none;
 color:#000000;
 }
 #content_popup .close_popup a:hover{
 text-decoration:none;
 color:#000000;
 }
 #content_popup .content{
 width:100%;
 height:350px;
 overflow-y:scroll;
 overflow-x:hidden;
 }
</style>
<script language="javascript" type="text/javascript">
 var tempX, tempY;
 if (!document.all)
 document.captureEvents(Event.MOUSEDOWN);
 document.onmousedown = mouseDown;
 function mouseDown (evt) {
 if (document.all) {
 tempX = (event.clientX-150);
 tempY = (event.clientY-100);
 }
 else {
 tempX= (evt.pageX-150)+"px";
 tempY = (evt.pageY-100)+"px";
 }
 }
 function showDiv(){
 document.getElementById('content_popup').style.display='';
 document.getElementById('content_popup').style.left =tempX;
 document.getElementById('content_popup').style.top = tempY;
 }
 function hideDiv(){
 document.getElementById('content_popup').style.display='none';
 }
</script>
ส่วนล่างนี้ก็นำไปวางไว้ใน Tag <body>...</body> ครับ
<div align="center">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p><a id="position1" name="position1" href="javascript:showDiv();" >ShowDiv</a></p>
</div>
<div id="content_popup" style="display:none;" >
    <div class="close_popup"><a href="javascript:hideDiv();">Close X</a></div>
    <div class="content">My Content</div>
</div>

ฝากติดตามผลงานด้านล่างด้วยครับ
--------------------------
► Website : http://www.siamfocus.com/
► LINE@ : http://line.me/ti/p/@siamfocus.com
► Facebook : https://www.facebook.com/fanpage.siamfocus
► Twitter : https://twitter.com/siamfocus
► Google+ : https://plus.google.com/+TAAMSiAMFOCUS
► Instagram : https://www.instagram.com/iamtaam
--------------------------









บทความ แนะนำ




หมวดหมู่บทความ