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. Linux随笔 - Linux统计某文件夹下文件、文件夹的个数

    统计某文件夹下文件的个数 ls -l |grep "^-"|wc -l 统计某文件夹下目录的个数 ls -l |grep "^d"|wc -l 统计文件夹下文件 ...

  2. Git 提交的正确姿势

    Git 提交的正确姿势:Commit message 编写指南 SCOP范围 middleware core config plugin test type范围 Git 每次提交代码,都要写 Comm ...

  3. 记录规则(recording rules)与告警规则(alerting rule)

    记录规则(recording rules) 配置规则 Prometheus支持两种类型的规则,可以对其进行配置,然后定期进行评估:记录规则和警报规则.要在Prometheus中包含规则,请创建一个包含 ...

  4. Selenium:三种等待方式详解

    我们在做WEB自动化时,一般要等待页面元素加载完成后,才能执行操作,否则会报找不到元素的错误,这样就要求我们在有些场景下加等待时间. 我们平常用到的有三种等待方式: 强制等待 隐式等待 显示等待 一. ...

  5. python开发必备pycharm专业版破解方法

    修改hosts文件 添加下面一行到hosts文件,目的是屏蔽掉Pycharm对激活码的验证 0.0.0.0 account.jetbrains.com 注:hosts文件路径,Windows在C:\W ...

  6. luoguP2184 贪婪大陆 题解(树状数组)

    P2184 贪婪大陆  题目 其实很容易理解就是询问一段区间内有多少段不同的区间 然后再仔细思索一下会发现: 1.只要一个区间的开头在一个节点i的左边,那么这个区间包含在区间1~i中. 2.只要一个区 ...

  7. linux缺頁異常處理--內核空間[v3.10]

    缺頁異常被觸發通常有兩種情況—— 1.程序設計的不當導致訪問了非法的地址 2.訪問的地址是合法的,但是該地址還未分配物理頁框 下面解釋一下第二種情況,這是虛擬內存管理的一個特性.盡管每個進程獨立擁有3 ...

  8. springboot中xml配置之@ImportResource

    springboot中进行相关的配置往往有java配置和xml配置两种方式. 使用java的方式配置只需要使用@configuration注解即可,而使用xml的方式配置的话需要使用@ImportRe ...

  9. 【串线篇】SpringMvc源码分析

    一.DispathcherServlet结构分析 1).所有请求过来DispatcherServlet收到请求, 2).调用doDispatch()方法进行处理 1).getHandler():根据当 ...

  10. Qt + VS【无法打开xxx文件】

    在工程中右键点击属性-配置属性-VC++目录-包含目录-选择自己安装的qt路径下的头文件包含进去即可,烦人的下杠红线也随之消失.