核心提示：点击出现弹窗遮罩层的小示例（代码实现）!DOCTYPE htmlhtmlheadmeta charset=utf-8title鼠标拖拽/titlestyle type=text/cssbody{bac...
点击出现弹窗遮罩层的小示例（代码实现）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标拖拽</title>
<style type="text/css">
body{
background: url(images/baidu_demo.png) no-repeat top center #fff;
padding: 0px;
margin: 0px;
font-size: 12px;
font-family: "microsoft yahei";
}
.ui-dialog{
width: 380px;
height: auto;
background: #fff;
border: 1px solid #d5d5d5;
position: absolute;
left: 100px;
top: 100px;
z-index: 9000;
display: none;
}
.ui-dialog a{
text-decoration: none;
}
.ui-dialog-title{
height: 48px;
line-height: 48px;
font-size: 16px;
padding-left: 20px;
color: #535353;
background: #f5f5f5;
border-bottom: 1px solid #efefef;
cursor: move;
}
.ui-dialog-title-closebutton{
width: 16px;
height: 16px;
display: block;
position: absolute;
top: 12px;
right: 20px;
background: url(images/close_def.png);
}
.ui-dialog-title-closebutton:hover{
background: url(images/close_hov.png);
}
.ui-dialog-content{
padding: 15px 20px;
}
.ui-dialog-pt15{
padding-top: 15px;
}
.ui-dialog-140{
height: 40px;
line-height: 40px;
text-align: right;
}
.ui-dialog-input{
width: 100%;
height: 40px;
margin: 0px;
padding: 0px;
border: 1px solid #d5d5d5;
font-size: 16px;
color: #c1c1c1;
text-indent: 25px;
outline: none;
}
.ui-dialog-input-username {
background: url(images/input_username.png) no-repeat;
}
.ui-dialog-input-password {
background: url(images/input_password.png) no-repeat;
}
.ui-dialog-submit {
width: 100%;
height: 50px;
display: block;
font-size: 16px;
color: #fff;
background: #3b7ae3;
text-align: center;
line-height: 50px;
}
.ui-dialog-submit:hover {
background: #3f81b0;
}
.ui-mask {
width: 100%;
height: 100%;
background: #000;
opacity: 0.4;
filter: Alpha(opacity=40);
/*filter:Alpha(opacity=40)的作用是为了兼容ie*/
position: absolute;
top: 0px;
left: 0px;
z-index: 8000;
display: none;
}
.link {
text-align: right;
line-height: 20px;
padding-right: 40px;
}
</style>
</head>
<body>
<p class="ui-dialog" id="dialog">
<p class="ui-dialog-title" id="dialogTitle">
登录通行证
<a href="javascript：hideDialog()" class="ui-dialog-title-closebutton"></a>
</p>
<p class="ui-dialog-content">
<p class="ui-dialog-pt15 ui-dialog-140">
<input type="text" placeholder="手机/邮箱/用户名" class="ui-dialog-input ui-dialog-input-username" />
</p>
<p class="ui-dialog-pt15 ui-dialog-140">
<input type="password" placeholder="密码" class="ui-dialog-input ui-dialog-input-password" />
</p>
<p class="ui-dialog-140">
<a href="#">忘记密码</a>
</p>
<p>
<a href="#" class="ui-dialog-submit">登录</a>
</p>
<p class="ui-dialog-140">
<a href="#">立即注册</a>
</p>
</p>
</p><!--弹窗外层结构-->
<p class="ui-mask" id="mask" onselectstart="return false"></p>
<!--onselectstart="return false"的作用是不允许选中-->
<p class="link">
<a href="javascript：showDialog()">登录</a>
</p>
<p style="width: 100%;height: 1000px;"></p>
<!--js部分-->
<script type="text/javascript">
//获取元素对象
function g(id) {
return document.getElementById(id);
}
//自动居中
function autoCenter(el) {
//获得可视区的宽度高度
var bodyW = document.documentElement.clientWidth;
var bodyH=document.documentElement.clientHeight;
//获得元素的宽度高度
var elW = el.offsetWidth;
var elH = el.offsetHeight;
// （可视区宽度-元素宽度)/2
// （可视区高度-元素高度)/2
el.style.left = (bodyW - elW) / 2 + 'px';
el.style.top = (bodyH-elH) / 2 + 'px';
}
//遮罩自动全屏
/*
scrollWidth\scrollHeight:表示整个文章的宽度高度
clientWidth\clientHeight:表示真个可视区的宽度高度
scrollTop： 表示页面向上滚动的距离
*/
function fillToBody (el) {
el.style.width = document.documentElement.scrollWidth + 'px';
el.style.height = document.documentElement.scrollHeight + 'px';
}
var mouseOffsetX = 0;
var mouseOffsetY = 0;//鼠标偏移
var isDraging = false;
//鼠标事件1：要计算鼠标相对于拖拽元素左上角的坐标，并且要标记为可拖动
g('dialogTitle').addEventListener('mousedown', function (e) {
/*
* pageX/pageY :是相对于文档窗口的左上角,x,y和clientY，clientX相同，其值是相对于可视区窗口的左上角。
*offsetLeft/offsetTop :这个属性是只读的，不可赋值。表示与父元素的左边距。
* offsetWidth/offsetHeight :其返回的是对象的width+padding+border之和，而style.width只是返回元素的width.
* */
var e = e||window.event;
mouseOffsetX = e.pageX - g('dialog').offsetLeft;
mouseOffsetY = e.pageY - g('dialog').offsetTop;
isDraging = true;
})
//鼠标事件2：在鼠标移动是要检测元素是否可移动，如果是就更新元素的位置到当前鼠标的位置，就是要减去第一步中鼠标偏移
document.onmousemove = function (e) {
var e= e||window.event;
var mouseX = e.pageX;
var mouseY = e.pageY;//获得鼠标当前的位置
var moveX = 0;
var moveY = 0;//浮层元素的新位置
if(isDraging === true) {
moveX = mouseX - mouseOffsetX;
moveY = mouseY - mouseOffsetY;//鼠标当前的位置 - 之前鼠标偏移的值
//范围限定，用来控制弹出框不可以拖动到浏览器外面
//moveX > 0 并且 moveX < (页面最大宽度-浮层的宽度)
var pageWidth = document.documentElement.clientWidth;
var pageHeight = document.documentElement.clientHeight;
var dialogWidth = g('dialog').offsetWidth;
var dialogHeight = g('dialog').offsetHeight;
var maxX = pageWidth - dialogWidth;
var maxY = pageHeight - dialogHeight;
moveX=Math.min(maxX,Math.max(0,moveX));
moveY=Math.min(maxY,Math.max(0,moveY));
g('dialog').style.left =moveX + 'px';
g('dialog').style.top = moveY + 'px';
}
}
//鼠标事件3：鼠标松开时元素标记为不可拖动
document.onmouseup = function () {
isDraging = false;
}
//当点击“登录”按钮后展示浮层元素
function showDialog() {
g('dialog').style.display="block";
g('mask').style.display="block";
autoCenter(g('dialog'));
fillToBody(g('mask'));
}
function hideDialog(){
g('dialog').style.display="none";
g('mask').style.display="none";
}
//当窗口大小改变时元素仍然居中
//onresize会在窗口大小改变时被调用
window.onresize = function(){
autoCenter(g('dialog'));
fillToBody(g('mask'));
}
g('ui-dialog-title-closebutton').onclick =g('mask').onclick= function () {
g('dialog').style.display = 'none';
g('mask').style.display = 'none';
}
</script>
</body>
</html>
以上就是通过点击页面上的“登录按钮”出现弹框和浮层，代码中用过了一些页面的属性方法，可以参看解释。 <
