JavaScript : ทำ 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> </p>
<p> </p>
<p> </p>
<p> </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>
มาเป็นเพื่อนกันครับ บนช่องทาง Social ด้านล่างนี้ครับ
--------------------------► LINE@ : @siamfocus.com
► Facebook : fanpage.siamfocus
► Twitter (X) : siamfocus
► Linkedin : taam-siamfocus
► Instagram : iamtaam
► Youtube : SiAMFOCUS
► Tiktok : @taamsiamfocus
--------------------------
