原⽣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">
原生js和js的区别<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 ateElement("style");
if(style.styleSheet){// IE
style.styleSheet.cssText = arguments[0];
}else{// w3c
var cssText = ateTextNode(arguments[0]);
style.appendChild(cssText);
}
var heads = ElementsByTagName("head");
if(heads.length){
heads[0].appendChild(style);
}else{
doc.documentElement.appendChild(style);
}
},
// 创建并显⽰遮罩层
'createChef':function(){
if(ElementsByClassName('Chef_opacity').length == 1){
veChild(ElementsByClassName('Chef_opacity')[0]);
}
var div = ate('div');
div.style.width = this.bodyW + 'px';
div.style.height = this.bodyH + 'px';
div.className = 'Chef_opacity';
document.body.appendChild(div);
},
//alert 框
'alert':function(){
/
/ 显⽰遮罩层
// 创建
var alertDiv = ate('div'),
alertH2 = ate('h2'),
alertX = ate('span'),
alertP = ate('p'),
alertBDiv = ate('div'),
alertFirm = ate('button');
alertX.innerHTML = 'X';
alertX.className = 'Chef_X';
/
/ 插号的click事件什么都不做
// 确定按钮的click事件什么都不做
veChild(alertDiv);
}
//样式以及内容
alertDiv.className = 'Chef_alert';
if(arguments.length == 1){
p = 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(){
ateElement(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>
//获取对象添加事件
//调⽤ Chef.alert() ⽅法
Chef.alert({
'title':'标题标题标题',
'content':'内容',
'firm':'确定',
'offset':'100px',
'width':'260px',
'shade':0.4
});
};
</script>
</body>
</html>
有问题可以留⾔咨询，看到⼀定回复。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。