<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JQuery Pop Up</title> <style type="text/css"> * { margin: 0; padding: 0; } /* Bubble pop-up */ .popup { display: none; position: absolute; z-index: 50; bottom: 20px; right: 20px; border-collapse: collapse; } .popup td.corner { height: 15px; width: 19px; } .popup td#topleft { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-1.png); } .popup td.top { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-2.png); } .popup td#topright { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-3.png); } .popup td.left { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-4.png); } .popup td.right { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-5.png); } .popup td#bottomleft { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-6.png); } .popup td.bottom { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-7.png); text-align: center;} .popup td.bottom img { display: block; margin: 0 auto; } .popup td#bottomright { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-8.png); } .popup table.popup-contents { font-size: 12px; line-height: 1.2em; background-color: #fff; color: #666; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif; } table.popup-contents th { text-align: right; text-transform: lowercase; } table.popup-contents td { text-align: left; } tr#release-notes th { text-align: left; text-indent: -9999px; background: url(http://jqueryfordesigners.com/demo/images/coda/starburst.gif) no-repeat top right; height: 17px; } tr#release-notes td a { color: #333; } </style> <script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#dpop').delay(2000).slideDown(1000); $('#dpop').delay(5000).slideUp(1000); }); </script> </head> <body> <div> <table id="dpop" class="popup"> <tbody> <tr> <td id="topleft" class="corner"></td> <td class="top"></td> <td id="topright" class="corner"></td> </tr> <tr> <td class="left"></td> <td> <table class="popup-contents"> <tbody> <tr> <th>Name:</th> <td>Tungman</td> </tr> <tr> <th>Date:</th> <td>1/8/2010</td> </tr> <tr> <th>Country:</th> <td>ThaiLand</td> </tr> <tr> <th>Browser:</th> <td>Firefox</td> </tr> <tr id="release-notes"> <th>www.thaicreate.com:</th> <td><a title="www.thaicreate.com" href="https://www.thaicreate.com">www.thaicreate.com</a></td> </tr> </tbody> </table> </td> <td class="right"></td> </tr> <tr> <td class="corner" id="bottomleft"></td> <td class="bottom"><img width="30" height="29" alt="popup tail" src="http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png"/></td> <td id="bottomright" class="corner"></td> </tr> </tbody> </table> </div> </body> </html>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#dpop').delay(2000).slideDown(1000); //กำหนดค่าเอาเองได้ว่าจะเอาเท่าไหร่ $('#dpop').delay(5000).slideUp(1000); //กำหนดค่าเอาเองได้ว่าจะเอาเท่าไหร่ }); </script>
.popup { display: none; position: absolute; /* ตรงนี้ ให้เป็นจุด reference */ z-index: 50; bottom: 20px; /* ตรงนี้ ให้เป็นจุด reference */ right: 20px; /* ตรงนี้ ให้เป็นจุด reference */ border-collapse: collapse; }
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
