原生JavaScript 模拟alert对话框
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对话框的更多相关文章
- 用原生javascript模拟经典FC游戏公路争霸
#用原生javascript模拟经典FC游戏公路争霸 前几天看了园子里面的随笔 [原生javascript开发仿微信打飞机小游戏](http://www.cnblogs.com/Mr-Nobody/p ...
- 使用原生JavaScript模拟getElementByClassName .
最近在工作中,由于有一个插件必须使用jquery-pack.js,而这个包又是非常古老的jquery,所以又的函数是无法使用的,例如$()选择器以及parent()都取不到标签的内容. 所以没办法,只 ...
- 原生 js 模拟 alert 弹窗
复制头部的 js 代码到你的 js 文件的任何地方,调用Chef.alert方法传入相应的参数即可并没有什么功能,只是一个提示的作用,可能样式比 alert 的弹窗好看点,css是写在js里的,只要你 ...
- 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现
原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...
- 使用原生 JavaScript 操作 DOM
原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...
- Javascript模拟继承(赠送.net吐槽一段)
首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...
- 浅谈 原生javaScript&&react 实现全局触摸按钮(附带对addeventlistener的了解)
1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...
- 原生JavaScript技巧大收集(11~20)-(终于又被我找到这篇文章了)
11.原生JavaScript加入收藏夹 function AddFavorite(sURL, sTitle) { try { window.external.addFavorite(sURL, sT ...
- artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口
artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应 ...
随机推荐
- appium常见问题11_小米手机初次启动app,报错255“Requires permission android.permission.WRITE_SECURE_SETTINGS”
问题: 新申请的测试机到啦,申请机型是小米9.打开开发者模式.USB调试后,连接电脑,准备跑一下自动化脚本.但是在pycharm中点击run后,出现报错,报错code:255,提示“Requires ...
- Vim使用taglist功能
下载 wget http://www.vim.org/scripts/download_script.php?src_id=19574 -O taglist.zip 然后解压taglist.zip到~ ...
- 3403. 题解【NOIP2013模拟】数列变换 (Standard IO)
先看题目: Description 小X 看到堆成山的数列作业十分头疼,希望聪明的你来帮帮他.考虑数列A=[A1,A2,...,An],定义变换f(A,k)=[A2,A3,,,,.Ak,A1,Ak+2 ...
- python基础----斐波那契数列
python实现斐波那契数列的三种方法 """ 斐波那契数列 0,1,1,2,3,5,8,13,21,... """ # 方法一:while ...
- Codeforces 492D Vanya and Computer Game
D. Vanya and Computer Game time limit per test 2 seconds memory limit per test 256 megabytes input s ...
- MySQLSyntaxErrorException: Row size too large 转摘自:https://confluence.atlassian.com/display/CONFKB/MySQLSyntaxErrorException%3A+Row+size+too+large
Symptoms The following appears in the atlassian-confluence.log: Caused by: com.mysql.jdbc.exceptions ...
- js转换成数字
/** * 转换成数字,有两种方法: * 1.Number(var) * 2.parseInt(var)与parseFloat(var) */ // 字符串转换成数字 // 纯字母 var foo = ...
- go语言从例子开始之Example3.变量
在 Go 中,变量 被显式声明,并被编译器所用来检查函数调用时的类型正确性 package main import "fmt" func main() { var 声明 1 个或者 ...
- Android开发中怎样用多进程、用多进程的好处、多进程的缺陷、解决方法(转)
转自:http://blog.csdn.net/spencer_hale/article/details/54968092 1.怎样用多进程 Android多进程概念:一般情况下,一个应用程序就是一个 ...
- 常用的kubectl命令
本文主要介绍kubernetes排查问题时经常用到的命令.这里主要借助kubectl命令来实现.以下列出常用命令,后面会对每个命令进行详细解释,并举例: kubectl核心命令 get 获取列出一个 ...