jQuery实现点击按钮弹出可拖拽模态对话框完整实例【测试可用】 原创
投稿:shichen2014
这篇文章主要介绍了jQuery实现点击按钮弹出可拖拽模态对话框的方法,结合完整实例形式分析了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的遮罩层,将这层遮罩层去掉,就是非模态对话框!感兴趣的朋友可以自己动手调试一下~