<!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>Simple JQuery Modal Window </title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script> $(document).ready(function() { //select all the a tag with name equal to modal $('a[name=modal]').click(function(e) { //Cancel the link behavior e.preventDefault(); //Get the A tag var id = $(this).attr('href'); //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set heigth and width to mask to fill up the whole screen $('#mask').css({ 'width': maskWidth, 'height': maskHeight }); //transition effect $('#mask').fadeIn(1000); $('#mask').fadeTo("slow", 0.8); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css('top', winH / 2 - $(id).height() / 2); $(id).css('left', winW / 2 - $(id).width() / 2); //transition effect $(id).fadeIn(2000); }); //if close button is clicked $('.window .close').click(function(e) { //Cancel the link behavior e.preventDefault(); $('#mask').hide(); $('.window').hide(); }); //if mask is clicked $('#mask').click(function() { $(this).hide(); $('.window').hide(); }); }); </script> <style> body { font-family: verdana; font-size: 15px; } a { color: #333; text-decoration: none; } a:hover { color: #ccc; text-decoration: none; } #mask { position: absolute; left: 0; top: 0; z-index: 9000; background-color: #000; display: none; } #boxes .window { position: absolute; left: 0; top: 0; width: 440px; height: 200px; display: none; z-index: 9999; padding: 20px; } #boxes #dialog { width: 375px; height: 203px; padding: 10px; background-color: #ffffff; } </style> </head> <body> <a href="#dialog" name="modal">Simple Window Modal</a> <div style="font-size: 10px; color: #ccc"> Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License.</div> <div id="boxes"> <div id="dialog" class="window"> Simple Modal Window | <a href="#" class="close" />Close it</a> </div> <!-- Mask to cover the whole screen --> <div id="mask"> </div> </div> </body> </html>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
