原生 js 模拟 alert 弹窗
复制头部的 js 代码到你的 js 文件的任何地方，调用Chef.alert方法传入相应的参数即可并没有什么功能，只是一个提示的作用，可能样式比 alert 的弹窗好看点，css是写在js里的，只要你会写 css 就可以自行修改样式.
Chef.alert 使用说明：
此方法有6个参数：
1,title 弹出框的标题
2,content 弹出框的提示文字也可以以字符串的形式传入任何html标签，
3,firm 弹出框按钮的文字
4,offset 弹出框距离顶部的位置，左右默认水平居中，
5,width 弹出框的宽度
6,shade 遮罩层的透明度
觉得没有用的参数可以不传
******
注意 ：Chef.alert 只是一个提示的作用 没有任何操作
以下是代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var Chef = {
//body 的宽高
'bodyH':document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight,
'bodyW':document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth,
//动态创建 style 标签添加样式
'cssStyle':function (){
var doc=document;
var style=doc.createElement("style");
if(style.styleSheet){// IE
style.styleSheet.cssText = arguments[0];
}else{// w3c
var cssText = doc.createTextNode(arguments[0]);
style.appendChild(cssText);
}
var heads = doc.getElementsByTagName("head");
if(heads.length){
heads[0].appendChild(style);
}else{
doc.documentElement.appendChild(style);
}
},
// 创建并显示遮罩层
'createChef':function(){
if(document.body.getElementsByClassName('Chef_opacity').length == 1){
document.body.removeChild(document.body.getElementsByClassName('Chef_opacity')[0]);
}
var div = this.create('div');
div.style.width = this.bodyW + 'px';
div.style.height = this.bodyH + 'px';
div.className = 'Chef_opacity';
document.body.appendChild(div);
},
//alert 框
'alert':function(){
// 显示遮罩层
this.createChef();
// 创建
var alertDiv = this.create('div'),
alertH2 = this.create('h2'),
alertX = this.create('span'),
alertP = this.create('p'),
alertBDiv = this.create('div'),
alertFirm = this.create('button');
alertX.innerHTML = 'X';
alertX.className = 'Chef_X';
// 插号的click事件 什么都不做
alertX.onclick = function(){alertFirm.onclick();}
// 确定按钮的click事件 什么都不做
alertFirm.onclick = function(){
document.getElementsByClassName('Chef_opacity')[0].style.display = 'none';
document.body.removeChild(alertDiv);
} //样式以及内容
alertDiv.className = 'Chef_alert';
if(arguments.length == 1){
document.getElementsByClassName('Chef_opacity')[0].style.background = 'rgba(0,0,0,'+arguments[0].shade+')' ;
alertDiv.style.top = arguments[0].offset;
if(arguments[0].width == undefined){
alertDiv.style.width = '260px';
}else{
alertDiv.style.width = arguments[0].width;
alertDiv.style.marginLeft = '-'+parseInt(arguments[0].width)/2 + 'px';
}
arguments[0].title == undefined ? alertH2.innerHTML = '来自网页的信息' : alertH2.innerHTML = arguments[0].title;
arguments[0].content == undefined ? alertP.innerHTML = '' : alertP.innerHTML = arguments[0].content;
arguments[0].firm == undefined ? alertFirm.innerHTML = '确定' : alertFirm.innerHTML = arguments[0].firm;
}else{// -- 默认提示信息
alertH2.innerHTML = '来自网页的信息';
alertFirm.innerHTML = '确定';
}
// 添加到页面
alertBDiv.appendChild(alertFirm);
alertH2.appendChild(alertX);
alertDiv.appendChild(alertH2);
alertDiv.appendChild(alertP);
alertDiv.appendChild(alertBDiv);
document.body.appendChild(alertDiv);
},
//创建
'create':function(){
return document.createElement(arguments[0]);
}
};
;(function(Chef){
var cssString = '\
*{padding:0;margin:0;}\
.Chef_opacity{display:block;background:rgba(0,0,0,0.4);position:fixed;top:0;z-index:99;}\
.Chef_alert{position:fixed;top:100px;background:white;border-top:3px solid #FF6636;width:260px;padding-bottom:5px;left:50%;margin-left:-130px;z-index:100;font-family:Microsoft YaHei;}\
.Chef_alert>h2{width:90%;margin:10px auto;margin-bottom:0;font-size:18px;}\
.Chef_alert>p{width:90%;margin:0 auto;padding:25px 0;border-bottom:1px solid #d8d8d8;}\
.Chef_alert>div{width:90%;height:60px;margin:0 auto;font-size:0;text-align: center;}\
.Chef_alert>div>button{width:50%;height:100%;border:0;outline:0;font-size:18px;color:#FE651F;background:white;font-family:Microsoft YaHei;cursor:pointer;}\
.Chef_X{float:right;font-size:13px;color:grey;cursor:pointer;font-weight:normal;}\
';
Chef.cssStyle(cssString);
})(Chef);
</script>
</head>
<body>
<button id='alertBtn'>alert弹窗</button>
<script>
//获取对象添加事件
document.getElementById('alertBtn').onclick = function(){
//调用 Chef.alert() 方法
Chef.alert({
'title':'标题标题标题',
'content':'内容',
'firm':'确定',
'offset':'100px',
'width':'260px',
'shade':0.4
});
};
</script>
</body>
</html>
有问题可以留言咨询，看到一定回复。
原生 js 模拟 alert 弹窗的更多相关文章
- JS模拟Alert与Confirm对话框
这2个例子都是用原生JS写的,主要是用JS拼接了界面,并未做过多的事件监听.,样式用了Css3的一些特性. 调用方式则为: //Alert Alert.show('我警告你哦~'); //Confir ...
- 原生js模拟jquery写法
function $_custom(fun) { document.onreadystatechange = function() { if (document.readyState == " ...
- 原生JS模拟jQuery $
模拟jQuery的$选择器 在获取元素的时候使用ID选择器,返回的是一个对象:使用类选择器或者标签选择器返回可能是一组元素:将获取到的一个或一组元素进行一个简易的封装封装成一个TQObject 什么是 ...
- js重写alert()弹窗
//重写alertwindow.alert = function(str){ var alertFram = document.getElementById('alertFram'); var shi ...
- 原生js模拟jquery中的addClass和removeClass方法
js代码: //添加类 function addClass(obj,className) { if(obj.className == '') { //如果没有class obj.className = ...
- CEF拦截js层alert弹窗 OnJSDialog 《转》
一 引言 CEF3嵌入后,用JS 弹出Alert框,按钮错位,确定按钮勉强能看到.很难看.为了改善体验,决定重写提示框. 环境:VS2008 VC MFC. 二 原理 参看类 CefJSDia ...
- 原生js控制控制--弹窗的显示和隐藏
以防浪费大家的时间,还是先上效果图吧,满足您的需求就往下look吧. 重要知识点:点击其他地方,也就是除了小叉子之外的地方也能够关闭弹窗哦.代码已标红 html代码: <button id ...
- 使用原生js模拟jQuery选择器，实现new方法，兼容ie5
// 考虑到兼容ie5,未使用es6语法 /* 使用方法: 在<head>标签中(需使用ready方法): <script src="./jQuery2.js"& ...
- javascript项目实战之原生js模拟淘宝购物车
通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html < ...
随机推荐
- 非Unicode工程读取Unicode文件
MyUnicodeReader.h #pragma once /******************************************************************** ...
- 不同版本CUDA编程的问题
1 无法装上CUDA的toolkit 卸载所有的NVIDIA相关的app,包括NVIDIA的显卡驱动,然后重装. 2之前的文件打不开,one or more projects in the solut ...
- python基础——定制类
python基础——定制类 看到类似__slots__这种形如__xxx__的变量或者函数名就要注意,这些在Python中是有特殊用途的. __slots__我们已经知道怎么用了,__len__()方 ...
- linux rpm问题：怎样查看rpm安装包的安装路径
x rpm问题:怎样查看rpm安装包的安装路径 2010-07-12 21:19:15 标签:rpm linux 路径 休闲 职场 rpm -qpl xxxxxx.rpm 1.如何安装rpm软件包 ...
- 内核中用于数据接收的结构体struct msghdr(转)
内核中用于数据接收的结构体struct msghdr(转) 我们从一个实际的数据包发送的例子入手,来看看其发送的具体流程,以及过程中涉及到的相关数据结构.在我们的虚拟机上发送icmp回显请求包,pin ...
- String[] a = new String[]{"1","2"},我如果想增加一个"3"到a中，如何增加？
在java中数组是定长的,当你声明了数组的大小后数组的长度就不能改变在你的程序中,数组的初始化大小为2,a[0]="1";a[1]="2",所以无法产生元素a[ ...
- ViewPager部分源码分析二：FragmentManager对Fragment状态的管理完成ViewPager的child添加或移出
ViewPager维护child代码流程: 注:PagerAdapter 使用的是FragmentPagerAdapter类或者它的子类. viewPager.populate(): void pop ...
- CLR via C#（17）--接口
CLR不允许继承多个基类,但是可以继承多个接口.凡是能使用具名接口类型的实例的地方,都能使用实现了接口的一个类型的实例. 接口是对一组方法签名进行了统一命名,但不提供任何实现,而具体类则必须为继承的全 ...
- AIX性能监控
http://www.ibm.com/developerworks/cn/aix/library/au-aix7memoryoptimize2/ http://www.aixchina.net/Art ...
- ASP.NET Web Api 服务器端变了，客户端该如何修改请求（转载）
转载地址:http://www.cnblogs.com/fzrain/p/3558765.html 前言 一旦我们将API发布之后,消费者就会开始使用并和其他的一些数据混在一起.然而,当新的需求出现时 ...