快捷搜索:   文件 java linux

jQuery + html 实现可拖动弹窗

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://blog.iinu.com.cn/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://blog.iinu.com.cn/#">点我关闭对话框</a> 
</div>
</div>


3、jQuery部分</pre>


<script src="https://blog.iinu.com.cn/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>



您可能还会对下面的文章感兴趣:

头像:

设置头像

x
名称(*):
域名    :
邮箱    :

评论内容(*): 刷新评论 提交评论