码迷,mamicode.com
首页 > 编程语言 > 详细

原生JavaScript 模拟alert对话框

时间:2018-10-23 10:46:45      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:name   nts   dex   otto   osi   none   abs   list   win   

Window.prototype._alert = function() {   //创建一个大盒子 
        var box = document.createElement("div");   //创建一个关闭按钮 
        var button = document.createElement("button");   //定义一个对象保存样式 
        var boxName = {
            width: "500px",
            height: "180px",
            backgroundColor: "#f8f8f8",
            border: "1px solid #ccc",
            position: "absolute",
            top: "50%",
            left: "50%",
            margin: "-90px 0 0 -250px",
            zIndex: "999",
            textAlign: "center",
            lineHeight: "180px"
        }   
        //给元素添加元素 
        for (var k in boxName) {
            box.style[k] = boxName[k];
        }   
        //把创建的元素添加到body中 
        document.body.appendChild(box);   
        //把alert传入的内容添加到box中 
        if (arguments[0]) {
            box.innerHTML = arguments[0];
        }
        button.innerHTML = "关闭";   
        //定义按钮样式 
        var btnName = {
            border: "1px solid #ccc",
            backgroundColor: "#fff",
            width: "70px",
            height: "30px",
            textAlign: "center",
            lineHeight: "30px",
            outline: "none",
            position: "absolute",
            bottom: "10px",
            right: "20px",
        }
        for (var j in btnName) {
            button.style[j] = btnName[j];
        }  
        //把按钮添加到box中 
        box.appendChild(button);   
        //给按钮添加单击事件 
        button.addEventListener("click",
        function() {
            box.style.display = "none";
        })
    }
    _alert("这是一个dialog")

 

原生JavaScript 模拟alert对话框

标签:name   nts   dex   otto   osi   none   abs   list   win   

原文地址:https://www.cnblogs.com/zhangchs/p/9834689.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!