jQuery + html 实现可拖动弹窗
1、CSS样式部分
<style type="text /css">
a {
text-decoration: none;
color: #eee;
display: block;
}
.button {
width: 200px;
height: 50px;
border-radius: 20px;
text-align: center;
line-height: 50px;
}
.callout_button {
background: #FF5B5B;
margin: 0 auto;
}
.callout_button:hover {
background: red;
}
.close_button {
float: right;
background-image: url(https://www.swvq.com/Uploads/image/20170209/20170209140648_99444.jpg);
margin-top: -344px;
width: 33px;
height: 33px;
margin-right: 12px;
}
.mask {
width: 100%;
height: 100%;
background: #000;
position: absolute;
top: 0px;
left: 0px;
opacity: 0.4;
z-index: 8000;
display: none;
-moz-user-select: none;
-webkit-user-select: none;
}
.dialog {
width: 380px;
background: #fff;
position: absolute;
z-index: 9000;
padding-bottom: 10px;
display: none;
-moz-user-select: none;
-webkit-user-select: none;
}
.dialog_head {
width: 100%;
height: 50px;
background: #E2EEFA;
text-align: center;
line-height: 50px;
color: #eee;
cursor: move;
color: red;
}
.dialog_content {
width: 100%;
height: 300px;
}
.dialog_content>div {
margin-left: 21%;
}
</style>
2、HTML部分
<div id="mask" class="mask">
</div>
<div class="dialog" id="dialog">
<div class="dialog_head" id="move_part">
密码重置
</div>
<div class="dialog_content">
<div class="dialog_content_center">
<em>原密码:</em> <input type="password" />
</div>
<div class="dialog_content_center">
<em>新密码:</em> <input type="password" />
</div>
<div class="dialog_content_center">
<em>确认新密码:</em> <input type="password" />
</div>
<div class="dialog_content_center">
<input type="button" value="确认修改" />
</div>
</div>
<div class="button close_button" id="close">
<a href="https: //www.swvq.com/#">点我关闭对话框</a>
</div>
</div>
3、jQuery部分
<script src="https: //www.swvq.com/Public/home/js/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function () {
var $dialog = $("#dialog");
var $mask = $("#mask");
//自动居中对话框
function autoCenter (el) {
var bodyW = $(window).width();
var bodyH = $(window).height();
var elW = el.width();
var elH = el.height();
$dialog.css({ "left": (bodyW - elW) / 2 'px', "top": (bodyH - elH) / 2 'px' });
};
//点击弹出对话框
$("#callout").click(function () {
$dialog.css("display", "block");
$mask.css("display", "block");
autoCenter($dialog);
});
//禁止选中对话框内容
if (document.attachEvent) {
//ie的事件监听,拖拽div时禁止选中内容,firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;
g('dialog').attachEvent('onselectstart', function () {
return false;
});
}
//声明需要用到的变量
var mx = 0, my = 0; //鼠标x、y轴坐标(相对于left,top)
var dx = 0, dy = 0; //对话框坐标(同上)
var isDraging = false; //不可拖动
//鼠标按下
$("#move_part").mousedown(function (e) {
e = e || window.event;
mx = e.pageX; //点击时鼠标X坐标
my = e.pageY; //点击时鼠标Y坐标
dx = $dialog.offset().left;
dy = $dialog.offset().top;
isDraging = true; //标记对话框可拖动
});
//鼠标移动更新窗口位置
$(document).mousemove(function (e) {
var e = e || window.event;
var x = e.pageX; //移动时鼠标X坐标
var y = e.pageY; //移动时鼠标Y坐标
if (isDraging) { //判断对话框能否拖动
var moveX = dx x - mx; //移动后对话框新的left值
var moveY = dy y - my; //移动后对话框新的top值
//设置拖动范围
var pageW = $(window).width();
var pageH = $(window).height();
var dialogW = $dialog.width();
var dialogH = $dialog.height();
var maxX = pageW - dialogW; //X轴可拖动最大值
var maxY = pageH - dialogH; //Y轴可拖动最大值
moveX = Math.min(Math.max(0, moveX), maxX); //X轴可拖动范围
moveY = Math.min(Math.max(0, moveY), maxY); //Y轴可拖动范围
//重新设置对话框的left、top
$dialog.css({ "left": moveX 'px', "top": moveY 'px' });
};
});
//鼠标离开
$("#move_part").mouseup(function () {
isDraging = false;
});
//点击关闭对话框
$("#close").click(function () {
$dialog.css("display", "none");
$mask.css("display", "none");
});
//窗口大小改变时,对话框始终居中
window.onresize = function () {
autoCenter($dialog);
};
});
</script>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanecgk
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01