手把手教你--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*/

（完）