javascript彈出浮動層，並鎖定頁面(1)

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>提示資訊框</title>
    <style type="text/css">
    body
    {
        filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#ffffff);
    }
    #massage_box
    {
        position: absolute;
        left: expression((body.clientWidth-350)/2);
        top: expression((body.clientHeight-200)/2);
        width: 350px;
        height: 200px;
        filter: dropshadow(color=#666666,offx=3,offy=3,positive=2);
        z-index: 2;
        visibility: hidden;
    }
    #mask
    {
        position: absolute;
        top: 0;
        left: 0;
        width: expression(body.scrollWidth);
        height: expression(body.scrollHeight);
        background: #ffffff;
        filter: ALPHA(opacity=60);
        z-index: 1;
        visibility: hidden;
    }
    .massage
    {
        border: #036 solid;
        border-width: 1 1 3 1;
        width: 95%;
        height: 95%;
        background: #fff;
        color: #036;
        font-size: 12px;
        line-height: 150%;
    }
    .header
    {
        background: #036;
        height: 10%;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        padding: 3 5 0 5;
        color: #fff;
    }
    </style>

    function MDown(Object)
    {
        Obj=Object.id
        document.all(Obj).setCapture()
        pX=event.x-document.all(Obj).style.pixelLeft;
        pY=event.y-document.all(Obj).style.pixelTop;
    }

    function MMove()
    {
        if(Obj!='')
        {
           document.all(Obj).style.left=event.x-pX;
           document.all(Obj).style.top=event.y-pY;
        }
    }

    function MUp()
    {
        if(Obj!='')
        {
           document.all(Obj).releaseCapture();
           Obj='';
        }
    }
    </script>

</head>
<body>
    <div id="massage_box">
        <div class="massage">
            <div class="header" onmousedown="MDown(massage_box)">
                <div style="display: inline; width: 150px; position: absolute">
                    本站提示資訊
                </div>
                <span onclick="massage_box.style.visibility='hidden'; mask.style.visibility='hidden'"
                    style="float: right; display: inline; cursor: hand">× </span>
            </div>
            <ul style="margin-right: 25">
                <li>你的要放的代碼 </li>
                <input type="text">
                <br>
                <input type="button" value="這是按扭">
                </li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div id="mask">
    </div>
    <span onclick="mask.style.visibility='visible';massage_box.style.visibility='visible'" style="cursor: hand"><a href="#">顯示提示資訊 </a></span>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More