ทำ 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 : https://www.siamfocus.com/
► LINE@ : https://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
--------------------------








บทความ แนะนำ

ตารางอบรม WordPress

ตารางอบรม WordPress

บันทึกไว้ก่อนครับ พอดีได้รับเกียรติให้ไปบรรยาย หัวข้อ การทำเว็บไซต์ด้วย WordPress โดยกำหนดการ ระยะเว...

WordPress 102 (จับจุด WordPress)

WordPress 102 (จับจุด WordPress)

หลังจากที่คุณติดตั้ง WordPress เรียบร้อยแล้ว เมื่อเข้าไปจะพบหน้า DashBoard หรือ หน้าควบคุม ซึ่งสรุปภ...

การสร้าง Google App

การสร้าง Google App

การสร้าง Google App โดยโจทย์วันนี้สร้างไว้สำหรับใช้ ในการใช้ Google Plus ตรวจสอบตัวตนนะครับ เช่นไว้ใ...

อันตรายจากบุหรี่

อันตรายจากบุหรี่

การสูบบุหรี่ เป็นปัญหาเกี่ยวกับสุขภาพอนามัยที่สำคัญปัญหาหนึ่งของโลกในปัจจุบัน โรคภัยอันเกี่ยวเนื่องม...

PHP AUTO INCLUDE FILE

PHP AUTO INCLUDE FILE

ปัญหาก่อนคิด File นี้ขึ้นมาคือเมื่อ File ที่เรา ต้องการ เรียกใช้ อยู่ต่าง Folder กัน ทำให้มีปัญหาเรื...




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