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










บทความ แนะนำ

เครื่องมือการทำ SEO

เครื่องมือการทำ SEO

การปรับแต่งเว็บไซต์ ให้รองรับกับการค้นหา เครื่องมือในการทำ SEO มากกว่า 50 รายการเพื่อเพิ่มประสิทธ...

การสร้าง Google App

การสร้าง Google App

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

การแปลง URL ให้สั้นลง

การแปลง URL ให้สั้นลง

บทความนี้มาดูวิธีการเปลี่ยน URL ของเว็บไซต์ให้สั้นลง เนื่องจากบางที URL ของเราเป็นภาษาไทย ทำให้เวลาก...

ทําเว็บขายของ

ทําเว็บขายของ

ทําเว็บขายของ ในยุคที่ผมเริ่มทำเว็บไซต์ใหม่ๆ ถ้าพูดถึง ทําเว็บขายของ จะหมายถึงการทำเว็บที่...




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