ทำ 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
--------------------------








บทความ แนะนำ

ออกแบบเว็บไซต์

ออกแบบเว็บไซต์

พอได้ยินคำว่า ออกแบบเว็บไซต์ หลายๆ คน อาจเข้าใจว่า ก็คือ การทำเว็บไซต์ ขึ้นมานี้แหล่ะ... แต่...

ทำเว็บ

ทำเว็บ

ไขปัญหา!! ทำเว็บราคาเท่าไหร่?? ทำไมทำเว็บแต่ละที่ ราคาไม่เท่ากัน.. ทำเว็บไซต์ต้องประกอบด้วย...

php export html to pdf

php export html to pdf

หลังจากที่ลองตัว CONVERT WEBSITE เป็น PDF อยู่หลายตัว ผมก็มาตกลงใช้ mPDF mPDF คือ libra...

เทศกาลส่งความสุข 2562

เทศกาลส่งความสุข 2562

พบกันเป็นประจำ สำหรับเดือนสุดท้ายของปี นะครับ เช่นเคยครับ ปี 2561 นี้ก็คงมาสรุปภาพรวมๆ การทำงานขอ...

สร้าง Shortcode ใน WordPress

สร้าง Shortcode ใน WordPress

วันนี้เรามาเรียนรู้เรื่องการสร้าง shortcode ใน WordPress กันครับ shortcode คืออะไร?? ทำไมต้องสร้า...

ทำขอบมนให้รูปภาพ

ทำขอบมนให้รูปภาพ

สวัสดีครับ วันนี้เรามาดูเทคนิคการทำภาพให้มีขอบโค้งมนกันนะครับ  ซึ่งปัจจุบันสามารถกำหนดได้จาก...




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