纯js点击按钮弹出登录对话框特效。该特效在用户点击登录按钮时,在屏幕中间弹出一个登录对话框,该对话框可以使用鼠标来进行位置拖动,整体效果简洁大方。
登录对话框的HTML结构如下:
<div class="ui-dialog" id="dialogMove" onselectstart='return false;'>
<div class="ui-dialog-title" id="dialogDrag" onselectstart="return false;" >
登录通行证
<a class="ui-dialog-closebutton" href="javascript:hideDialog();"></a>
</div>
<div class="ui-dialog-content">
<div class="ui-dialog-l40 ui-dialog-pt15">
<input class="ui-dialog-input ui-dialog-input-username" type="input" placeholder="手机/邮箱/用户名" />
</div>
<div class="ui-dialog-l40 ui-dialog-pt15">
<input class="ui-dialog-input ui-dialog-input-password" type="input" placeholder="密码" />
</div>
<div class="ui-dialog-l40">
<a href="#">忘记密码</a>
</div>
<div>
<a class="ui-dialog-submit" href="#" >登录</a>
</div>
<div class="ui-dialog-l40">
<a href="#">立即注册</a>
</div>
</div>
</div>
在弹出登录对话框时,要添加一个全屏的遮罩层
<div class="ui-mask" id="mask" onselectstart="return false"></div>
还需要一个用于触发弹出登录对话框的按钮或超链接。
<a href="javascript:showDialog()" class="current">立刻登录</a>
为登陆对话框添加下面的CSS样式。
.ui-dialog{
width: 380px;height: auto;display: none;
position: absolute;z-index: 9000;
top: 0px;left: 0px;
border: 1px solid #D5D5D5;background: #fff;
}
.ui-dialog a{text-decoration: none;}
.ui-dialog-title{
height: 48px;line-height: 48px; padding:0px 20px;color: #535353;font-size: 16px;
border-bottom: 1px solid #efefef;background: #f5f5f5;
cursor: move;
user-select:none;
}
.ui-dialog-closebutton{
width: 16px;height: 16px;display: block;
position: absolute;top: 12px;right: 20px;
background: url(../images/close_def.png) no-repeat;cursor: pointer;
}
.ui-dialog-closebutton:hover{background:url(../images/close_hov.png);}
.ui-dialog-content{
padding: 15px 20px;
}
.ui-dialog-pt15{
padding-top: 15px;
}
.ui-dialog-l40{
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 2px ;
}
.ui-dialog-input-password{
background: url(../images/input_password.png) no-repeat 2px ;
}
.ui-dialog-submit{
width: 100%;height: 50px;background: #3b7ae3;border:none;font-size: 16px;color: #fff;
outline: none;text-decoration: none;
display: block;text-align: center;line-height: 50px;
}
.ui-dialog-submit:hover{
background: #3f81b0;
}
.ui-mask{
width: 100%;height:100%;background: #000;
position: absolute;top: 0px;height: 0px;z-index: 8000;
opacity:0.4; filter: Alpha(opacity=40);
}
通过下面的javascript代码来实例化登录对话框,以及监听鼠标的点击事件。
var dialogInstace , onMoveStartId; // 用于记录当前可拖拽的对象
// 获取元素对象
function g(id){return document.getElementById(id);}
// 自动居中元素(el = Element)
function autoCenter( el ){
var bodyW = document.documentElement.clientWidth;
var bodyH = document.documentElement.clientHeight;
var elW = el.offsetWidth;
var elH = el.offsetHeight;
el.style.left = (bodyW-elW)/2 + 'px';
el.style.top = (bodyH-elH)/2 + 'px';
}
// 自动扩展元素到全部显示区域
function fillToBody( el ){
el.style.width = document.documentElement.clientWidth +'px';
el.style.height = document.documentElement.clientHeight + 'px';
}
// Dialog实例化的方法
function Dialog( dragId , moveId ){
var instace = {} ;
instace.dragElement = g(dragId); // 允许执行 拖拽操作 的元素
instace.moveElement = g(moveId); // 拖拽操作时,移动的元素
instace.mouseOffsetLeft = 0; // 拖拽操作时,移动元素的起始 X 点
instace.mouseOffsetTop = 0; // 拖拽操作时,移动元素的起始 Y 点
instace.dragElement.addEventListener('mousedown',function(e){
var e = e || window.event;
dialogInstace = instace;
instace.mouseOffsetLeft = e.pageX - instace.moveElement.offsetLeft ;
instace.mouseOffsetTop = e.pageY - instace.moveElement.offsetTop ;
// instace.moveElement.style.zIndex = zIndex ++;
})
return instace;
}
// 在页面中侦听 鼠标弹起事件
document.onmouseup = function(e){
dialogInstace = false;
clearInterval(onMoveStartId);
}
// 在页面中侦听 鼠标移动事件
document.onmousemove = function(e) {
var e = e || window.event;
var instace = dialogInstace;
if (instace) {
var maxX = document.documentElement.clientWidth - instace.moveElement.offsetWidth;
var maxY = document.documentElement.clientHeight - instace.moveElement.offsetHeight ;
instace.moveElement.style.left = Math.min( Math.max( ( e.pageX - instace.mouseOffsetLeft) , 0 ) , maxX) + "px";
instace.moveElement.style.top = Math.min( Math.max( ( e.pageY - instace.mouseOffsetTop ) , 0 ) , maxY) + "px";
}
if(e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
};
// 拖拽对话框实例对象
Dialog('dialogDrag','dialogMove');
function onMoveStart(){
}
// 重新调整对话框的位置和遮罩,并且展现
function showDialog(){
g('dialogMove').style.display = 'block';
g('mask').style.display = 'block';
autoCenter( g('dialogMove') );
fillToBody( g('mask') );
}
// 关闭对话框
function hideDialog(){
g('dialogMove').style.display = 'none';
g('mask').style.display = 'none';
}