欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

手把手教你--html、js弹出框插件smoke.js(简单实用弹出框),赠送优化后主题(css)

程序员文章站 2022-03-11 17:20:30
...

在一些表单等需要弹窗提醒的时候,每个浏览器都有一个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):

手把手教你--html、js弹出框插件smoke.js(简单实用弹出框),赠送优化后主题(css)

(自己改后的样式) :

手把手教你--html、js弹出框插件smoke.js(简单实用弹出框),赠送优化后主题(css)

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>

手把手教你--html、js弹出框插件smoke.js(简单实用弹出框),赠送优化后主题(css)

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则在后
      });
}	

手把手教你--html、js弹出框插件smoke.js(简单实用弹出框),赠送优化后主题(css)

点击确定后,控制台输出:

手把手教你--html、js弹出框插件smoke.js(简单实用弹出框),赠送优化后主题(css)

3.3--signal()无按钮提示框

function f1 (){
  smoke.signal("我是signal()马上就消失", function(){
      console.log("我消失了");
    }, {
      duration: 2000,//自动消失时间
      classname: "custom-class"
    });
}

 手把手教你--html、js弹出框插件smoke.js(简单实用弹出框),赠送优化后主题(css)

3.4--prompt()输入值提示框

function f1(){
  smoke.prompt("我是prompt()?", function(e){
      if (e == "小明"){//如果点击“确定”e是文本框的值,如果点“取消”e是false
        
      }else{
       
      }
    }, {
      ok: "确定",
      cancel: "取消",
      classname: "custom-class",
      reverseButtons: true,
      value: "小明"//文本框默认值
    });
}

手把手教你--html、js弹出框插件smoke.js(简单实用弹出框),赠送优化后主题(css)

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: "没爱好"
    });
}

手把手教你--html、js弹出框插件smoke.js(简单实用弹出框),赠送优化后主题(css)


以下是自己优化后的样式可直接保存为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*/

(完)