• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

jQuery + html 实现可拖动弹窗

武飞扬头像
Luke
帮助13077

1、CSS样式部分

<style type="text /css">
    a {
        text-decoration: none;
        color: #eee;
        display: block;
    }
    .button {
        width: 200px;
        height: 50px;
        border-radius: 20px;
        text-align: center;
        line-height: 50px;
    }
    .callout_button {
        background: #FF5B5B;
        margin: 0 auto;
    }
    .callout_button:hover {
        background: red;
    }
    .close_button {
        float: right;
        background-image: url(https://www.swvq.com/Uploads/image/20170209/20170209140648_99444.jpg);
        margin-top: -344px;
        width: 33px;
        height: 33px;
        margin-right: 12px;
    }
    .mask {
        width: 100%;
        height: 100%;
        background: #000;
        position: absolute;
        top: 0px;
        left: 0px;
        opacity: 0.4;
        z-index: 8000;
        display: none;
        -moz-user-select: none;
        -webkit-user-select: none;
    }
    .dialog {
        width: 380px;
        background: #fff;
        position: absolute;
        z-index: 9000;
        padding-bottom: 10px;
        display: none;
        -moz-user-select: none;
        -webkit-user-select: none;
    }
    .dialog_head {
        width: 100%;
        height: 50px;
        background: #E2EEFA;
        text-align: center;
        line-height: 50px;
        color: #eee;
        cursor: move;
        color: red;
    }
    .dialog_content {
        width: 100%;
        height: 300px;
    }
    .dialog_content>div {
        margin-left: 21%;
    }
</style>

2、HTML部分

<div id="mask" class="mask">
</div>
<div class="dialog" id="dialog">
    <div class="dialog_head" id="move_part">
        密码重置
    </div>
    <div class="dialog_content">
        <div class="dialog_content_center">
            <em>原密码:</em> <input type="password"  /> 
        </div>
        <div class="dialog_content_center">
            <em>新密码:</em> <input type="password"  /> 
        </div>
        <div class="dialog_content_center">
            <em>确认新密码:</em> <input type="password"  /> 
        </div>
        <div class="dialog_content_center">
            <input type="button" value="确认修改"  /> 
        </div>
    </div>
    <div class="button close_button" id="close">
        <a href="https: //www.swvq.com/#">点我关闭对话框</a> 
    </div>
</div>

3、jQuery部分

<script src="https: //www.swvq.com/Public/home/js/jquery-2.1.4.min.js"></script>
<script>
    $(document).ready(function () {
        var $dialog = $("#dialog");
        var $mask = $("#mask");

        //自动居中对话框
        function autoCenter (el) {
            var bodyW = $(window).width();
            var bodyH = $(window).height();
            var elW = el.width();
            var elH = el.height();
            $dialog.css({ "left": (bodyW - elW) / 2   'px', "top": (bodyH - elH) / 2   'px' });
        };

        //点击弹出对话框
        $("#callout").click(function () {
            $dialog.css("display", "block");
            $mask.css("display", "block");
            autoCenter($dialog);
        });

        //禁止选中对话框内容
        if (document.attachEvent) {
            //ie的事件监听,拖拽div时禁止选中内容,firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;
            g('dialog').attachEvent('onselectstart', function () {
                return false;
            });
        }
        //声明需要用到的变量
        var mx = 0, my = 0;      //鼠标x、y轴坐标(相对于left,top)
        var dx = 0, dy = 0;      //对话框坐标(同上)
        var isDraging = false;      //不可拖动
        //鼠标按下
        $("#move_part").mousedown(function (e) {
            e = e || window.event;
            mx = e.pageX;     //点击时鼠标X坐标
            my = e.pageY;     //点击时鼠标Y坐标
            dx = $dialog.offset().left;
            dy = $dialog.offset().top;
            isDraging = true;      //标记对话框可拖动                
        });
        //鼠标移动更新窗口位置
        $(document).mousemove(function (e) {
            var e = e || window.event;
            var x = e.pageX;      //移动时鼠标X坐标
            var y = e.pageY;      //移动时鼠标Y坐标
            if (isDraging) {        //判断对话框能否拖动
                var moveX = dx   x - mx;      //移动后对话框新的left值
                var moveY = dy   y - my;      //移动后对话框新的top值
                //设置拖动范围
                var pageW = $(window).width();
                var pageH = $(window).height();
                var dialogW = $dialog.width();
                var dialogH = $dialog.height();
                var maxX = pageW - dialogW;       //X轴可拖动最大值
                var maxY = pageH - dialogH;       //Y轴可拖动最大值
                moveX = Math.min(Math.max(0, moveX), maxX);     //X轴可拖动范围
                moveY = Math.min(Math.max(0, moveY), maxY);     //Y轴可拖动范围
                //重新设置对话框的left、top
                $dialog.css({ "left": moveX   'px', "top": moveY   'px' });
            };
        });
        //鼠标离开
        $("#move_part").mouseup(function () {
            isDraging = false;
        });
        //点击关闭对话框
        $("#close").click(function () {
            $dialog.css("display", "none");
            $mask.css("display", "none");
        });
        //窗口大小改变时,对话框始终居中
        window.onresize = function () {
            autoCenter($dialog);
        };
    });
</script>

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanecgk
系列文章
更多 icon
同类精品
更多 icon
继续加载