javascript用层模拟提示框

最新推荐文章于 2018-07-13 11:45:26 发布

啊哈前端

最新推荐文章于 2018-07-13 11:45:26 发布

阅读量400

点赞数

分类专栏： javascript

javascript 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用层模拟提示消息框</title>
</head>
<body>
     <div id="promptMsgBox" style="border: 1px solid #ccc;display: none;height: 100px;width: 300px;text-align: center;">
            <p>层模拟的提示框，请关闭</p>
            <p>
                <input type="button" id="promptMsgBoxAgree" value="确定" />
                <input type="button" id="promptMsgBoxCancel" value="取消" />
            </p>
     </div>
<input type="button" id="promptMsgBoxOpen" value="弹出" />
<script type="text/javascript">
    window.οnlοad=function(){
        function promptMsgBox(options){
            var e=options.promptMsgBox, //获取元素
                    setCss=function(_this,cssOption){ //设置元素样式
                        //判断节点类型
                        if(!_this||_this.nodeType===3||_this.nodeType===8||!_this.style){
                            return;
                        }
                        for(var cs in cssOption){
                            _this.style[cs]=cssOption[cs];
                        }
                        return _this;
                    };
            setCss(e,{  //初始化基本样式
                "position": "absolute",
                "zIndex": 100,
                "top": ((document.body.scrollTop||document.documentElement.scrollTop)+window.screen.availHeight/2- e.offsetHeight)+"px",
                "backgroundColor": "#ebedf3"
            });
            options.promptMsgBoxOpen.οnclick=function(){ //打开确认按钮
                e.style.display="block";
                setCss(e,{ //设置位置
                    "left": "50%",
                    "marginLeft": -e.offsetWidth/2+"px",
                    "top": ((document.body.scrollTop||document.documentElement.scrollTop)+window.screen.availHeight/2- e.offsetHeight)+"px"
                });
            }
            options.promptMsgBoxAgree.οnclick=function(){ //确认按钮
                e.style.display="none"; //隐藏层
                if(options.agreeCallBack) options.agreeCallBack();//如果存在确认的回调，则执行
            }
            options.promptMsgBoxCancel.οnclick=function(){ //取消按钮
                e.style.display="none"; //隐藏层
                options.cancelCallBack&&options.cancelCallBack();//如果存在取消的回调，则执行
            }
        }
        promptMsgBox({ //层模拟的提示消息框
            "promptMsgBox": document.getElementById("promptMsgBox"), //目标元素
            "promptMsgBoxOpen": document.getElementById("promptMsgBoxOpen"),//打开确认按钮
            "promptMsgBoxAgree": document.getElementById("promptMsgBoxAgree"), //确认按钮
            "agreeCallBack": function(){ //确认之后的毁掉函数
                alert("确认的回调函数！");
            },
            "promptMsgBoxCancel": document.getElementById("promptMsgBoxCancel"), //取消按钮
            "cancelCallBack": function(){ //取消之后的回调函数
                alert("取消的回调函数！");
            }
        });
    }
</script>
</body>
</html>