拖拽弹出框

最新推荐文章于 2022-05-04 10:30:15 发布

weixin_34313182

最新推荐文章于 2022-05-04 10:30:15 发布

阅读量124

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sungangmo/p/6761250.html

版权

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; 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: "微软雅黑";
        }

        .ui-dialog{
            width: 380px;height: auto;display: none;
            position: absolute;z-index: 9000;
            top: 100px;left: 100px;
            border: 1px solid #d5d5d5;background: #fff;
        }
        .ui-dialog a{ text-decoration: none;}
        .ui-dialog-title{
            height: 48px;line-height: 48px;padding-left: 20px;color: #535353;font-size: 16px;
            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-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;
        }
        .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);
            position: absolute;top: 0px;left: 0px;z-index: 8000;display: none;
            -moz-user-select: none;
        }

        .link{
            text-align: right;line-height: 20px;padding-right: 40px;
        }

    </style>

</head>
<body >

<div class="ui-dialog" id="dialog">

    <div class="ui-dialog-title" id="dialogTitle">
        登录通行证
        <a href="javascript:hideDialog();" class="ui-dialog-title-closebutton"></a>
    </div>
    <div class="ui-dialog-content">


        <div class="ui-dialog-pt15 ui-dialog-l40">
            <input type="text" value="手机/邮箱/用户名" class="ui-dialog-input ui-dialog-input-username">
        </div>
        <div class="ui-dialog-pt15 ui-dialog-l40">
            <input type="text" value="密码" class="ui-dialog-input ui-dialog-input-password">
        </div>
        <div class=" ui-dialog-l40 ">
            <a href="#">忘记密码</a>
        </div>
        <div>

            <a href="#" class="ui-dialog-submit">登录</a>

        </div>
        <div class="ui-dialog-l40">
            <a href="#">立即注册</a>
        </div>
    </div>
</div>

<div class="ui-mask" id="mask" onselectstart="return false;"></div>
<div class="link">
    <a href="javascript:showDialog();">登录</a>
</div>


<script type="text/javascript">

    //  获取元素对象
    function g(id){ return document.getElementById(id); }

    //  自动居中 - 登录浮层 ( el = Elemenet)
    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';
    }

    var mouseOffsetX = 0;   //  偏移
    var mouseOffsetY = 0;

    var isDraging = false;  //  是否可拖拽的标记

    //  鼠标事件1 － 在标题栏上按下（要计算鼠标相对拖拽元素的左上角的坐标，并且标记元素为可拖动）
    g('dialogTitle').addEventListener('mousedown',function(e){
        var e = e || window.event;
        mouseOffsetX = e.pageX - g('dialog').offsetLeft;
        mouseOffsetY = e.pageY - g('dialog').offsetTop;
        isDraging = true;
    })
    //  鼠标事件2 － 鼠标移动时（要检测，元素是否可标记为移动，如果是，则更新元素的位置，到当前鼠标的位置［ps：要减去第一步中获得的偏移］）
    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 < (页面最大宽度 - 浮层的宽度)
            //            moveY > 0 并且  movey < (页面最大高度 - 浮层的高度)

            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';
    }

    window.onresize =function(){
        autoCenter(g('dialog'));
        fillToBody( g('mask') );
    }
</script>

</body>
</html>

转载于:https://www.cnblogs.com/sungangmo/p/6761250.html

weixin_34313182

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖拽弹出框

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>拖拽效果</title> <style type="text/css"> ...
复制链接

扫一扫