jQuery实现点击按钮弹出可拖拽模态对话框完整实例【测试可用】 原创
原创 更新时间:2023年04月25日 18:26:15 原创 投稿:shichen2014
这篇文章主要介绍了jQuery实现点击按钮弹出可拖拽模态对话框的方法,结合完整实例形式分析了jQuery调用模态对话框的基本原理、实现方法与相关操作技巧,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
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=gbk" /> <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://9i0i.com/pic.php?p=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的遮罩层,将这层遮罩层去掉,就是非模态对话框!感兴趣的朋友可以自己动手调试一下~
相关文章
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
这篇文章给大家介绍使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo的实现思路,涉及到Jquery.Qrcode基本使用,Jquery.Qrcode对中文字符的支持及Jquery.Qrcode添加自定义Logo图片的相关知识,本文介绍非常详细,具有参考价值,感兴趣的朋友一起看看吧2016-09-09JQuery获取样式中的background-color颜色值的问题
用JQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome、Firefox显示的格式不一样,经搜索找到了下段代码可解决此问题,感兴趣的朋友可以参考下2013-08-08
最新评论