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对话框的更多相关文章

  1. 用原生javascript模拟经典FC游戏公路争霸

    #用原生javascript模拟经典FC游戏公路争霸 前几天看了园子里面的随笔 [原生javascript开发仿微信打飞机小游戏](http://www.cnblogs.com/Mr-Nobody/p ...

  2. 使用原生JavaScript模拟getElementByClassName .

    最近在工作中,由于有一个插件必须使用jquery-pack.js,而这个包又是非常古老的jquery,所以又的函数是无法使用的,例如$()选择器以及parent()都取不到标签的内容. 所以没办法,只 ...

  3. 原生 js 模拟 alert 弹窗

    复制头部的 js 代码到你的 js 文件的任何地方,调用Chef.alert方法传入相应的参数即可并没有什么功能,只是一个提示的作用,可能样式比 alert 的弹窗好看点,css是写在js里的,只要你 ...

  4. 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现

    原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...

  5. 使用原生 JavaScript 操作 DOM

    原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...

  6. Javascript模拟继承(赠送.net吐槽一段)

    首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...

  7. 浅谈 原生javaScript&&react 实现全局触摸按钮(附带对addeventlistener的了解)

    1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...

  8. 原生JavaScript技巧大收集(11~20)-(终于又被我找到这篇文章了)

    11.原生JavaScript加入收藏夹 function AddFavorite(sURL, sTitle) { try { window.external.addFavorite(sURL, sT ...

  9. artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应 ...

随机推荐

  1. C#关于日期 月 天数 和一年有多少周及根据某年某周获取时间段的计算(转)

    /// 当前月有多少天 /// </summary> /// <param name="y"></param> /// <param na ...

  2. nginx 虚拟主机+反向代理+负载均衡

    nginx是一款免费.开源的http服务器,它是由俄罗斯程序设计师开发的,官方测试,nginx能支撑5万的并发量,主要功能有虚拟主机.反向代理和负载均衡等. nginx配置 # 全局块 ... # e ...

  3. python 使用[[v]*n]*m遇到的问题

    需求:想通过python生成m行n列的矩阵 方式1:(有问题) data = [[0]*3]*4 #4行3列 data 输出 [[0, 0, 0], [0, 0, 0], [0, 0, 0], [0, ...

  4. Java空对象模式

    在“空对象”模式中,空对象将替换NULL对象实例的检查.而不是检查一个空值,Null对象反映一个无关的关系(即什么也不做). 这种Null对象还可以用于在数据不可用时提供默认行为. 在空对象模式(Nu ...

  5. 任正非:5G技术只独家卖给美国!不卖给韩国、日本、欧洲

    https://v.qq.com/x/page/g3001d0xvxe.html 我只转个标题,细节不管了. 呃,实际上就是说,老任头也决定向美国低头了,对不. 不过,也确实没办法. 该起床吃钙片了.

  6. tomcat脚本

    !/bin/sh # eg: tomcat.sh start xxx # proc_dir="/usr/local/xxx/tomcat-zc-web/bin" proc_name ...

  7. Vue小白篇 -Vue 的模板语法

    可以插入任何你想插入的内容,除了 if-else if-else用三元运算符代替 <div id="box"> <!--模板语法--> <h2> ...

  8. docker 安装nexus

    1.查找镜像 docker search nexus 2.拉取镜像 docker pull sonatype/nexus3 3.启动容器 docker run -d -p 8081:8081 -p 8 ...

  9. 第5篇K8S创建资源的两种方式

      一.创建方式分类: 命令 vs 配置文件 Kubernetes 支持两种方式创建资源: 1.用 kubectl 命令直接创建,比如: kubectl run httpd-app --image=r ...

  10. linux CentOS7 nginx nginx-rtmp-module搭建直播

    直播配置 1. 安装 Nginx 依赖软件 yum -y install gcc gcc-c++ autoconf automake make yum -y install zlib zlib-dev ...