使用JS模擬模態框

原創 zmz571 2018-09-12 03:00
很久以前在1個項目中使用過
當時做的不完善，沒有屏蔽掉滾動框的BUG
這次想起來修改下，代碼見附件
-----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function bb(str) {
            var bordercolor, msgw, msgh;
            msgw=300;
            msgh=300;
            titleheight=25;
            bordercolor="green";
            titlecolor = "black";
            document.body.style.setAttribute("overflow","hidden");//禁用滾動條
            /*
           
            遮罩層
            */
            var bgdiv = document.createElement("div");
            bgdiv.setAttribute("id", "bgdiv");
            bgdiv.style.position = "absolute";
            bgdiv.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";
            bgdiv.style.filter = "0.6";
            bgdiv.style.background = "#777";
            bgdiv.style.top = document.documentElement.scrollTop;//滾動條的高度
            bgdiv.style.left = "0px";
            bgdiv.style.width = "100%";
            bgdiv.style.height = "100%";
            bgdiv.style.zIndex = "100";
            document.body.appendChild(bgdiv);

            /*
            彈出框的層
            */
            var msgdiv = document.createElement("div");
            msgdiv.setAttribute("id", "msgdiv");
            msgdiv.setAttribute("align", "center");
            msgdiv.style.background = "white";
            msgdiv.style.border = "1px solid "+bordercolor;
            msgdiv.style.position = "absolute";
            msgdiv.style.top = "30%";
            msgdiv.style.left = "35%";
            msgdiv.style.width = msgw + "px";
            msgdiv.style.height = msgh + "px";
            msgdiv.style.align = "center";
            msgdiv.style.zIndex = "101";
            var tit = document.createElement("h4");
            tit.setAttribute("id", "msgtit");
            tit.setAttribute("align", "right");
            tit.style.margin = "0";
            tit.style.padding = "3px";
            tit.style.background = titlecolor;
            tit.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20,startY=20,finishX=100,finishY=100,style=1,opacity=75,finishOpacity=100);";
            tit.style.filter = "0.75";
            tit.style.height = titleheight;
            tit.style.color = "white";
            tit.style.cursor = "pointer";
            tit.innerHTML = "<a href='#'>關閉</a>";
            tit.onclick = function () {//關閉事件
                document.body.removeChild(bgdiv);
                document.getElementById("msgdiv").removeChild(tit);
                document.body.removeChild(msgdiv);
                document.body.style.setAttribute("overflow","scroll");//啓動滾動條
            }
            document.body.appendChild(msgdiv);
            document.getElementById("msgdiv").appendChild(tit);
            var txt=document.createElement("p");
            txt.style.margin="1em o";
            txt.setAttribute("id","msgTxt");
            txt.innerHTML=str;
            document.getElementById("msgdiv").appendChild(txt);
           
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br />
        <input id="Checkbox1" type="button" value="查看"/>
    </div>
    <br />3213213213<br />3213213<br />3213213213<br />33<br
    />3213213213<br />33<br />
    />3213213213<br />33<br />
    />3213213213<br />33<br />
    />3213213213<br />33<br />
    <br />3213213213<br />3213213<br />3213213213<br />33<br
    />3213213213<br />33<br />
    />3213213213<br />33<br />
    />3213213213<br />33<br />
    />3213213213<br />33<br />
    <br />3213213213<br />3213213<br />3213213213<br />33<br
    />3213213213<br />33<br />
    />3213213213<br />33<br />
    />3213213213<br />33<br />
    />3213213213<br />33<br />
    <br />3213213213<br />3213213<br />3213213213<br />33<br
    />3213213213<br />33<br />
    />3213213213<br />33<br />
    />3213213213<br />33<br />
<br />3213213213<br />3213213<br />3213213213<br />33<br
    />3213213213<br />33<br />
    />3213213213<br />33<br />
    />3213213213<br />33<br />
    />3213213213<br />33<br />
    <br />3213213213<br />3213213<br />3213213213<br />33<br
    />3213213213<br />33<br />
    />3213213213<br />33<br />
    />3213213213<br />33<br />
    />3213213213<br />33<br />
    <br />3213213213<br />3213213<br />3213213213<br />33<br
    />3213213213<br />33<br />
    />3213213213<br />33<br />
    />3213213213<br />33<br />
    />3213213213<br />33<br />
    />3213213213<br />33<br />
    </form>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Linux基本操作命令

wbzjacky 2019-02-24 13:12:38

444句英語

wbzjacky 2019-02-24 13:12:37

真實的模擬***綜合實驗

wbzjacky 2019-02-24 13:12:37

三層交換機的HSRP、vlan、端口聚合

wbzjacky 2019-02-24 13:12:37

HSRP和二層交換機的端口聚合、vlan

wbzjacky 2019-02-24 13:12:37

路遇一個“乞討者“

楊木藝 2019-02-24 14:19:35

如果同事暗中傷害你，應該怎麼辦？

這個饅頭有餡 2019-02-24 13:59:08

職場中，抱怨越多的員工，越被領導瞧不起！

這個饅頭有餡 2019-02-24 13:59:08

老程序員被裁，應屆生卻能月薪 1.3 萬？這你能忍？

前端高達 2019-02-24 13:48:04

遇到到處蹭吃卻從不請客吃飯的主怎麼辦？

樑軍年 2019-02-24 13:26:35

高標準機房綜合配線安裝

wbzjacky 2019-02-24 13:12:38

IPsec ***實驗

wbzjacky 2019-02-24 13:12:37

網絡系統集成

wbzjacky 2019-02-24 13:12:37

CISCO路由AAA的Easy ***

wbzjacky 2019-02-24 13:12:37

CISCO訪問控制列表 企業網絡管理的必殺技

wbzjacky 2019-02-24 13:12:37