jQuery實現點擊按鈕彈出可拖拽模態對話框完整實例【測試可用】 原創
css部分:
.dialog { display: none; /* 初始隱藏 */ position: absolute; width: 300px; height: 200px; top: 50px; left: 50px; background-color: #fff; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0,0,0,.2); } .dialog-header { height: 30px; line-height: 30px; padding: 0 10px; font-size: 16px; font-weight: bold; background-color: #f5f5f5; border-bottom: 1px solid #ccc; cursor: move; /* 允許拖拽 */ } .dialog-body { padding: 10px; } /* 遮罩層樣式 */ .mask { display: none; /* 初始隱藏 */ position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,.3); }
html部分:
<!-- 點擊按鈕彈出對話框的按鈕 --> <button class="dialog-trigger">點擊彈出對話框</button> <!-- 對話框 --> <div class="dialog" id="dialog"> <div class="dialog-header">對話框</div> <div class="dialog-body">這裡是對話框內容</div> </div>
js部分:
$(function() { var $dialog = $('.dialog'); // 對話框 var $mask = $('.mask'); // 遮罩層 var isDragging = false; // 是否拖拽中 // 點擊彈出對話框 $('.dialog-trigger').click(function() { $dialog.show(); // 顯示對話框 $mask.show(); // 顯示遮罩層 }); // 拖拽對話框 $dialog.find('.dialog-header').mousedown(function(e) { isDragging = true; // 開始拖拽 var startX = e.pageX; // 鼠標按下時的X坐標 var startY = e.pageY; // 鼠標按下時的Y坐標 var left = $dialog.offset().left; // 對話框初始的left值 var top = $dialog.offset().top; // 對話框初始的top值 // 拖拽事件 $(document).mousemove(function(e) { if (isDragging) { var moveX = e.pageX - startX; // 鼠標移動的X距離 var moveY = e.pageY - startY; // 鼠標移動的Y距離 $dialog.css({ left: left + moveX + 'px', top: top + moveY + 'px' }); } }); // 停止拖拽事件 $(document).mouseup(function() { isDragging = false; }); }); // 點擊遮罩層或對話框的關閉按鈕,隱藏對話框和遮罩層 $mask.click(function() { $dialog.hide(); $mask.hide(); }); $dialog.find('.dialog-close').click(function() { $dialog.hide(); $mask.hide(); }); });
完整實例如下:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery點擊彈出模態對話框</title> <style> .dialog { display: none; /* 初始隱藏 */ position: absolute; width: 300px; height: 200px; top: 50px; left: 50px; background-color: #fff; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0,0,0,.2); } .dialog-header { height: 30px; line-height: 30px; padding: 0 10px; font-size: 16px; font-weight: bold; background-color: #f5f5f5; border-bottom: 1px solid #ccc; cursor: move; /* 允許拖拽 */ } .dialog-body { padding: 10px; } /* 遮罩層樣式 */ .mask { display: none; /* 初始隱藏 */ position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,.3); } </style> </head> <body> <!-- 點擊按鈕彈出對話框的按鈕 --> <button class="dialog-trigger">點擊彈出對話框</button> <!-- 對話框 --> <div class="dialog" id="dialog"> <div class="dialog-header">對話框</div> <div class="dialog-body">這裡是對話框內容</div> </div> <script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script> <script> $(function() { var $dialog = $('.dialog'); // 對話框 var $mask = $('.mask'); // 遮罩層 var isDragging = false; // 是否拖拽中 // 點擊彈出對話框 $('.dialog-trigger').click(function() { $dialog.show(); // 顯示對話框 $mask.show(); // 顯示遮罩層 }); // 拖拽對話框 $dialog.find('.dialog-header').mousedown(function(e) { isDragging = true; // 開始拖拽 var startX = e.pageX; // 鼠標按下時的X坐標 var startY = e.pageY; // 鼠標按下時的Y坐標 var left = $dialog.offset().left; // 對話框初始的left值 var top = $dialog.offset().top; // 對話框初始的top值 // 拖拽事件 $(document).mousemove(function(e) { if (isDragging) { var moveX = e.pageX - startX; // 鼠標移動的X距離 var moveY = e.pageY - startY; // 鼠標移動的Y距離 $dialog.css({ left: left + moveX + 'px', top: top + moveY + 'px' }); } }); // 停止拖拽事件 $(document).mouseup(function() { isDragging = false; }); }); // 點擊遮罩層或對話框的關閉按鈕,隱藏對話框和遮罩層 $mask.click(function() { $dialog.hide(); $mask.hide(); }); $dialog.find('.dialog-close').click(function() { $dialog.hide(); $mask.hide(); }); }); </script> </body> </html>
感興趣的朋友可以使用本站在線工具:http://tools.jb51.net/code/HtmlJsRun 測試上述代碼運行效果!
PS:該實例中的模態對話框實現,其實是增加上瞭一層mask的遮罩層,將這層遮罩層去掉,就是非模態對話框!感興趣的朋友可以自己動手調試一下~