原生 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>

有问题可以留言咨询，看到一定回复。

转载于:https://www.cnblogs.com/chefweb/p/5953729.html

原生 js 模拟 alert 弹窗相关推荐

原生js模拟实现京东轮播图
原生js模拟实现京东轮播图一.实现原理 1. 官网发现 2. opacity和z-index 3.定位二.文档目录三.HTML结构四.css样式五.js行为_实现自动轮播与点击效果六.效果 ...
0807-0815原生js模拟实现真快乐网站
0807-0815原生js模拟实现真快乐网站功能实现首页: 无缝轮播图: 自动播放,鼠标移入暂停,鼠标移入浮标切换图片,按钮切换上下图片二级菜单鼠标移入商品分类列表弹出相关二级菜单楼层电梯 ...
jquery+原生js模拟淘宝输入框下拉提示
1.概述: 模拟淘宝.百度的搜索框,当用户输入时,会自动下拉提示关键字,使用组件jquery.js(1.12.1),jquery-ui.js(1.12.1).jquery-ui.css(1.12.1) ...
用原生JS模拟一个聊天记录表
这是一个模拟聊天记录的案例,初学者可以通过本例对来加深JS的事件的熟悉和理解. 话不多说,我们先来看一下效果图吧. 下面开始说明怎么写吧. HTML结构: <div id="main& ...
html5京东秒杀页面代码,静态页面（一）：原生JS模拟京东秒杀专场倒计时
最近将BOM重新复习了一遍,本想使用定时器给女朋友做一个生日倒计时,奈何canvas都忘了.所以模拟了一个京东的秒杀专场倒计时. 各位小伙伴有什么建议和意见,请不吝赐教. 下面是京东首页的截图: 利用 ...
原生js模拟jQuery选择器功能及方法
模拟jQuery选择器功能及方法查看jQuery源码可以发现,jQuery中没有使用new操作符来创建新对象,而是采用调用jQuery原型中init()函数的方式返回一个新对象. 熟悉jQuery的 ...
[JS]JS模拟Alert弹出框效果--自定义CSS样式
function alertMsg(msg, mode) { //mode为空,即只有一个确认按钮,mode为1时有确认和取消两个按钮msg = msg || '';mode = mode || 0; ...
原生js删除html,原生js模拟v-for增加删除.html
.input-list{ border:1px dashed #F00; margin-top:10px; } .input-box{ margin-bottom: 5%;margin-right: ...
vue中 vue-router的路由的2种模式（原生js模拟演示）
hash模式 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...

原生 js 模拟 alert 弹窗

原生 js 模拟 alert 弹窗相关推荐

最新文章

热门文章