手把手教你--html、js弹出框插件smoke.js(简单实用弹出框),赠送优化后主题(css)
在一些表单等需要弹窗提醒的时候，每个浏览器都有一个alert()，comfirm()函数能弹出信息，但是浏览器的自带的这种效果样式不统一，而且都固定在页面顶部,简单来说就是两个字--难看；
smoke.js是一个轻量级且灵活的JavaScript插件,支持回调函数,在不同浏览器上都好用，比较个性化。它自己的alert(), comfirm()效果完全是由html、css、js编写。
在使用smoke.js之前你得需要下载smoke.css和smoke.js然后引入你写的页面中；文章底部将自己优化的css放上.
下载地址 （gitHub）
先来看看样式：
（官方样式，官方默认提供4种样式下载地址：https://github.com/hxgf/smoke-themes/tree/master/themes）：
（自己改后的样式） ：
smoke.js包含了这几个警告框：
alert：常规的alert窗口-（重点）
comfirm:带有yes和no按钮的Alert窗口-（重点）
prompt:带有输入框的Alert窗口
quiz:带有选择的Alert窗口
aignal：只有弹出信息，没有按钮
调用很方便直接smoke.alert(参数列表)，可直接调用弹出框。
demo如下：
1.页面引入js，和css（css是改后的css，可直接文章底部复制保存为smoke.css）
<link rel="stylesheet" type="text/css" href="smoke.css">
<script type="text/javascript" src="smoke.min.js"></script>
2.页面中加一个按钮来调用弹框。
<button type="button" onclick="f1()">弹框</button>
3.1--alert（）按钮提示框
<script type="text/javascript">
function f1 (){
smoke.alert("我是smoke.alert()",//第一个参数提示内容
function(){},//第二个参数回调函数
{ok: "确定"});//第三个参数按钮的属性
}
</script>
3.2-- confirm（）确认提示框
function f1 (){
smoke.confirm("你是confirm()么？", function(e){
if (e){//点击按钮调用方法，e根据点击按钮返回-false或true
console.log("我是");
}else{
console.log("我不是");
}
}, {
ok: "确定",
cancel: "取消",
classname: "custom-class",//给弹出框的div加一个class，叫什么无所谓，不加也可
reverseButtons: true//两个按钮的前后位置，true则是“确定”再前，false则在后
});
}
点击确定后，控制台输出：
3.3--signal（）无按钮提示框
function f1 (){
smoke.signal("我是signal()马上就消失", function(){
console.log("我消失了");
}, {
duration: 2000,//自动消失时间
classname: "custom-class"
});
}
3.4--prompt（）输入值提示框
function f1(){
smoke.prompt("我是prompt()?", function(e){
if (e == "小明"){//如果点击“确定”e是文本框的值，如果点“取消”e是false
}else{
}
}, {
ok: "确定",
cancel: "取消",
classname: "custom-class",
reverseButtons: true,
value: "小明"//文本框默认值
});
}
3.5--quiz（）多按钮窗口--最多只能加3个可选按钮。
function f1(){
smoke.quiz("你的爱好?", function(e){
if (e == "吃"){//如果点击“吃”e是“吃”，如果点“没爱好”e是false
}
}, {
button_1: "吃",
button_2: "喝",
button_3: "嫖",
button_4: "赌",
button_cancel: "没爱好"
});
}
以下是自己优化后的样式可直接保存为smoke.css直接使用（按钮有些丑，可自定义，或引入bootstrap后按钮自动变美）：
/*全局css 弹窗css START*/
.smoke-base{position:fixed;top:0;left:0;bottom:0;right:0;visibility:hidden;opacity:0;-moz-transition:all .3s;-webkit-transition:opacity .3s;-o-transition:all .3s;transition:all .3s}
.smoke-base.smoke-visible{opacity:1;visibility:visible}
.smokebg{position:fixed;top:0;left:0;bottom:0;right:0}
.smoke-base .dialog{position:absolute}
.dialog-prompt{margin-top:5px;text-align:center}
.smoke{font-weight:700;text-align:center;font-size:22px;line-height:130%}
.smoke-base {background: rgba(0,0,0,.2);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#90000000,endColorstr=#900000000);}
.smoke-base .dialog {top: 25%;left: 25%;width: 50%;}
.smoke {background-color: rgba(255,255,255,1);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#ffffff);}
.queue{display:none}
.smoke-base .dialog{top:25%;left:30%;width:40%}
.smoke-base .dialog-inner{margin:8px;background:#fff;padding-top: 20px;/*padding:10px*/}
.smoke{text-transform:none;color:#222;font-weight:400;background-color:rgba(0,0,0,.5);border-radius:5px;font-size:20px}
/*.dialog-head{border-bottom: 1px solid #CCCCCC;margin-bottom: 10px; padding: 5px;text-align: right;}
.dialog-head .dialog-close{color: #aaa;cursor: pointer;}*/
.dialog-info{padding: 10px; font-size: 16px;font-weight: normal;}
.dialog-buttons{padding: 10px 0 20px;}
.dialog-prompt input{width:300px;text-align:center}
.smoke button + button {margin-left:10px}
/*全局css 弹窗css END*/
（完）
————————————————
版权声明：本文为CSDN博主「小流至江河」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/javaYouCome/article/details/81661988
