[原创]弹出框的实现

<div id="dialogbg" style="display: none;">
        <div class="dialog" style="left: 679px; top: 269px;">
            <div class="title" unselectable="on">
                <div>
                    消息</div>
            </div>
            <div class="content">
                请输入您的姓名</div>
            <div class="text">
                <input type="text"></div>
            <div class="btns">
                <button class="ok">
                    确定</button>
                <button class="cancel">
                    取消</button></div>
        </div>
    </div>

#dialogbg {
    background: rgba(0,0,0,.2);
    overflow: hidden;
    position: fixed;
    height: 100%;
    width: 100%;
    margin: 0;
    left: 0;
    top: 0;
}

* html #dialogbg {
    _position: absolute;
    _top: expression(offsetParent.scrollTop);
}
#dialogbg .dialog {
    -webkit-border-radius: 5px 5px 0 0;
       -moz-border-radius: 5px 5px 0 0;
            border-radius: 5px 5px 0 0;
    border: 1px solid #666;
    display: inline-block;
    position: absolute;
    background: white;
    text-align: left;
    overflow: hidden;
    margin: auto;
    left: 50%;
    top: 50%;
    behavior: url("PIE.htc");
    *behavior: none;
}

dialogbg样式是黑色的背景，设置position为fixed，无论滚动条怎么滚动，dialogbg都是以浏览器的左上角为起点，并且不动。把弹出框dialog放在dialogbg的里面，设置position为absolute，所以他也不会随浏览器的滚动而动位置。

 

人人网面试题

用  js、html、css实现一个弹出提示控件：   
1.  分别实现类似于系统的  alert、confirm、prompt对话框；   

    <div id="wrap">
        <br>
        请点击下面的链接弹出对框框
        <br>
        <a href="javascript:msgbox('你好，欢迎使用 Windows 8 旗舰版')">alert</a>
        <br>
        <a href="javascript:msgbox('您确定要关闭计算机吗?',function(t){alert(t)})">confirm</a>
        <br>
        <a href="javascript:msgbox('请输入您的姓名',function(t){alert(t)},'匿名')">prompt</a>
    </div>
    <script>
        function msgbox(msg, fun, text) {
            var dialogbg = document.querySelector("#dialogbg");
            if (!dialogbg) {
                dialogbg = document.createElement("div");
                dialogbg.id = "dialogbg";
                document.body.appendChild(dialogbg);
            }
            dialogbg.innerHTML = '<div class="bgcolor"></div><div class="dialog"><div class="title" unselectable="on"><div>消息</div></div><div class="content"></div><div class="text"><input type="text"></div><div class="btns"><button class="ok">确定</button><button class="cancel">取消</button></div></div>';

            dialogbg.querySelector(".content").innerHTML = msg || "&nbsp;";
            function hide(sel) {
                dialogbg.querySelector(sel).style.display = "none";
            }
            var btnOk = dialogbg.querySelector(".ok"),
        btnCancel = dialogbg.querySelector(".cancel");
            if (fun) {
                if (text == undefined) {
                    hide(".text");
                    btnOk.onclick = function () {
                        fun(true);
                    }
                    btnCancel.onclick = function () {
                        fun(false);
                    }
                } else {
                    var textbox = dialogbg.querySelector("input");
                    textbox.value = text;
                    btnOk.onclick = function () {
                        fun.call(textbox, textbox.value);
                    }
                }
            } else {
                hide(".cancel");
                hide(".text");
            }

            function btnClose() {
                dialogbg.style.display = "none";
            }

            btnOk.addEventListener("click", btnClose, true);
            btnCancel.addEventListener("click", btnClose, true);

            dialogbg.style.display = "block";

            var dialog = dialogbg.querySelector(".dialog");
            dialog.style.left = (dialogbg.offsetWidth - dialog.offsetWidth) / 2 + "px";
            dialog.style.top = (dialogbg.offsetHeight - dialog.offsetHeight) / 2 + "px";
            drag(dialog, dialog.querySelector(".title"));
        }
        function drag(dialog, titleBar) {
            var onDrag,
        pos = {},
        dialogbg = document.querySelector("html");

            titleBar.addEventListener("mousedown", function (e) {
                pos.left = dialog.offsetLeft;
                pos.top = dialog.offsetTop;
                pos.x = e.pageX;
                pos.y = e.pageY;
                onDrag = true;
            }, false);

            dialogbg.addEventListener("mousemove", function (e) {
                if (onDrag) {
                    dialog.style.left = (pos.left + e.pageX - pos.x) + "px";
                    dialog.style.top = (pos.top + e.pageY - pos.y) + "px";
                }
            }, false);

            titleBar.onselectstart = function () {
                return false;
            }

            dialogbg.onmouseup = function () {
                onDrag = false;
            }
        }
</script>