带遮罩层的对话框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>mask</title>
    <script type="text/javascript">
        var topWin = window.top;
        var topDoc = topWin.document;
 
        var docEle = function() {
            return topDoc.getElementById(arguments[0]) || false;
        }

        function openDialog(name,content) {
 
            var _m = "mask";
            if (docEle(_d)) topDoc.body.removeChild(docEle(_d));
            if (docEle(_m)) topDoc.body.removeChild(docEle(_m));

            //mask遮罩层
            var newMask = topDoc.createElement("div");
            newMask.id = _m;
            newMask.style.position = "absolute";
            newMask.style.zIndex = "1";
            _scrollWidth = Math.max(topDoc.body.scrollWidth, topDoc.documentElement.scrollWidth);
            _scrollHeight = Math.max(topDoc.body.scrollHeight, topDoc.documentElement.scrollHeight);
            newMask.style.width = _scrollWidth + "px";
            newMask.style.height = _scrollHeight + "px";
            newMask.style.top = "0px";
            newMask.style.left = "0px";
            newMask.style.background = "#33393C";
            newMask.style.filter = "alpha(opacity=10)";
            newMask.style.opacity = "0.30";
            topDoc.body.appendChild(newMask);




            //新弹出层
            var _d = "dialog";
            var newDiv = topDoc.createElement("div");
            newDiv.id = _d;
            newDiv.style.position = "absolute";
            newDiv.style.zIndex = "9999";
            newDivWidth = content.attributes["width"].value;
            newDivHeight = content.attributes["height"].value;
            newDiv.style.width = newDivWidth + "px";
            newDiv.style.height = newDivHeight + "px";
            newDiv.style.top = (topDoc.body.scrollTop + screen.height / 2 - newDivHeight / 2) + "px";
            newDiv.style.left = (topDoc.body.scrollLeft + topDoc.body.clientWidth / 2 - newDivWidth / 2) + "px";
            newDiv.style.background = "#F8F8FF";
            newDiv.style.border = "1px solid #836FFF";
            newDiv.style.padding = "0px";
            topDoc.body.appendChild(newDiv);




            //弹出层滚动居中
            function newDivCenter() {
                newDiv.style.top = (topDoc.body.scrollTop + screen.height / 2 - newDivHeight / 2) + "px";
                newDiv.style.left = (topDoc.body.scrollLeft + topDoc.body.clientWidth / 2 - newDivWidth / 2) + "px";
            }
            if (topDoc.all) {
                topWin.attachEvent("onscroll", newDivCenter);
            }
            else {
                topWin.addEventListener('scroll', newDivCenter, true);
            }




            // 新图层头部          
            var _h = topDoc.createElement("div");
 _h.style.height = "15px";
            _h.style.background = "#AB82FF";
            _h.style.padding = "5px";
 
 
            var _title = topDoc.createElement("h4");
            _title.style.font_weight = "bolder";
            //_title.style.float = "left";
            _title.style.display = "inline";
            _title.innerHTML = name;
            _h.appendChild(_title);
 
 
            //关闭新图层和mask遮罩层
            var _close = topDoc.createElement("div");
            _close.style.cursor = "pointer";
            _close.style.color = "blue";
            _close.style.float = "right";
            _close.innerHTML = "关闭";
            _close.onmouseover = function() {
                _close.style.color = "orange";
            };
            _close.onmouseout = function() {
                _close.style.color = "blue";
            };
            _close.onclick = function() {
                if (topDoc.all) {
                    topWin.detachEvent("onscroll", newDivCenter);
                }
                else {
                    topWin.removeEventListener('scroll', newDivCenter, false);
                }
                document.body.appendChild(content);
                content.style.display = "none";
                topDoc.body.removeChild(docEle(_d));
                topDoc.body.removeChild(docEle(_m));
                return false;
            };
            _h.appendChild(_close);
 
            var _content = topDoc.createElement("div");
            _content.appendChild(content);
            newDiv.appendChild(_h);
            newDiv.appendChild(_content);
            content.style.display = "inline";
        }
    </script>
</head>
<body>
    <body>
        <a style="cursor: pointer" onclick="openDialog('新对话框', document.getElementById('aaa'));">点击弹出带遮罩层对话框</a>
 <div id="aaa" width="400" height="300" align="center" style="display: none;">
 <table>
 <tr>
 <td>姓名:</td>
 <td><input type="text” name="name"/></td>
 </tr>
 <tr>
 <td>住址:</td>
 <td><input type="text” name="address"/></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td>
 <input type="button" value="OK"/>&nbsp;
 <input type="button" value="Cancel"/>
 </td>
 </tr>
 </table>
 </div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </body>
    <script type="text/javascript">
     openDialog('新对话框', document.getElementById("aaa"));
    </script>
</html>

带遮罩层的对话框_第1张图片

你可能感兴趣的:(JavaScript,dialog)