zoukankan      html  css  js  c++  java
  • 原生JavaScript 模拟alert对话框

    Window.prototype._alert = function() {   //创建一个大盒子 
            var box = document.createElement("div");   //创建一个关闭按钮 
            var button = document.createElement("button");   //定义一个对象保存样式 
            var boxName = {
                 "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",
                 "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")
  • 相关阅读:
    docker制作容器(待更新)
    docker 容器连接宿主机mysql问题
    发布linux应用程序(待更新)
    docker 常用命令 (日常更新)
    多线程还是多进程的选择及区别(转)
    关于C++ const 的全面总结《转》
    JS闭包详解
    JS基础——js动画
    JS基础——innerHTML、CSS-DOM
    JS基础——DOM(一)
  • 原文地址:https://www.cnblogs.com/zhangchs/p/9834689.html
Copyright © 2011-2022 走看看