纯js点击按钮弹出登录对话框特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款简单的纯js点击按钮弹出登录对话框特效。该特效在用户点击登录按钮时，在屏幕中间弹出一个登录对话框，该对话框可以使用鼠标来进行位置拖动，整体效果简洁大方。

使用方法

HTML结构

登录对话框的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样式

为登陆对话框添加下面的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

通过下面的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';
}