这篇文章主要介绍了鼠标拖拽移动子窗体的JS实现,需要的朋友可以参考下
1.子窗体
在设计网站的时候,我们需要设计一些模态的子窗体,比如
这一步很容易实现,只需要div+css就ok了,请看代码:
.modal-background
{
background-color: #999999;
bottom: 0;
left: 0;
opacity: 0.3;
position: fixed;
right: 0;
top: 0;
z-index: 1100;
}
.modal-window
{
background-color: #FFFFFF;
border: 1px solid #6B94AD;
box-shadow: 5px 5px 5px #6B94AD;
font-family: 'Microsoft YaHei';
font-size: 12px;
height: 120px;
left: 50%;
margin-left: -160px;
margin-top: -160px;
opacity: 1;
position: fixed;
top: 50%;
width: 320px;
z-index: 1110;
}
.modal-window .head
{
height: 25px;
color: #fff;
font-weight: 600;
background-image: -moz-linear-gradient(top, #4A8CC5, #2963A5); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4A8CC5), color-stop(1, #2963A5)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A8CC5', endColorstr='#2963A5', GradientType='0'); /* IE*/
}
.modal-window .head center
{
padding-top: 2px;
}
以上就是鼠标拖拽移动子窗体的JS实现的详细内容,更多请关注0133技术站其它相关文章!