js弹框

雨点打透心脏的1/2处 2022-03-22 03:09 479阅读 0赞

1.引入jquery.min.js

2.上代码

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">

<head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>无标题文档</title>  
        <script language="JavaScript" type="text/javascript" src="js/jquery.min.js"></script>  
    </head>  
<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\{background:\#363636;margin:0 auto;\}  
    .close\_button:hover\{background: black;\}  
    .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:\#4B4B4B;text-align: center;line-height: 50px;color: \#eee; cursor: move;\}  
    .dialog\_content\{width: 100%;height:300px;\}  
</style>  
    <body>  
        <div id="callout" class="button callout\_button"><a href="\#">弹出对话框</a></div>  
        <div id="mask" class="mask"></div>  
        <div class="dialog" id="dialog">  
            <div class="dialog\_head" id="move\_part">可拖拽部分</div>  
            <div class="dialog\_content"></div>  
            <div class="button close\_button" id="close"><a href="\#">点我关闭对话框</a>  
            </div>  
        </div>

</body>

//鼠标按下  
            $("\#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)\{  
                console.log(11);  
                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>  
</html>

3.效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70]: /images/20220322/4bf1fe79f3744f229ebf3a0b35722a88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hleHVfYmxvZw_size_16_color_FFFFFF_t_70 1]: /images/20220322/6dae21829e70466d84c39ce471b3bec4.png