alert 替代效果smoke.js

jopen 7年前

在一些表单等需要弹窗提醒的时候,每个浏览器都有一个alert(),comfirm()函数能弹出信息,但是浏览器的自带的这种效果样式不统一,而且都固定在页面顶部;

smoke.js轻量级的JS插件,他标准化浏览器的alert(), comfirm()效果。完全是由html、css、js编写;

  • 要求:CSS3支持
  • 兼容性:大部分浏览器,包括IE6(没有CSS3可视化效果)
  • License:MIT

使用方法:本文使用的是click事件,你也可以自定义事件触发类型;

<body>   <a href="#" rel="demo-alert">alert</a>   <a href="#" rel="demo-confirm">confirm</a>   <a href="#" rel="demo-prompt">prompt</a>   <a href="#" rel="demo-quiz">quiz</a>   <a href="#" rel="demo-signal">signal</a>  </body>

样式:

.smoke-base {    position: fixed;    top: 0;    left: 0;    bottom: 0;    right: 0;    visibility: hidden;    opacity: 0;   }     .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: 15px;     text-align: center;   }     .dialog-buttons {     margin: 20px 0 5px 0   }     .smoke {     font-family: Menlo, 'Andale Mono', monospace;     text-align: center;     font-size: 22px;     line-height: 150%;   }     .dialog-buttons button {     display: inline-block;     vertical-align: baseline;     cursor: pointer;     font-family: Menlo, 'Andale Mono', monospace;     font-style: normal;     text-decoration: none;     border: 0;     outline: 0;     margin: 0 5px;     -webkit-background-clip: padding-box;     font-size: 13px;     line-height: 13px;     font-weight: normal;     padding: 9px 12px;   }     .dialog-prompt input {     margin: 0;     border: 0;     font-family: sans-serif;     outline: none;     font-family: Menlo, 'Andale Mono', monospace;     border: 1px solid #aaa;     width: 75%;     display: inline-block;     background-color: transparent;     font-size: 16px;     padding: 8px;   }     .smoke-base {     background: rgba(0,0,0,.3);     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#90000000,endColorstr=#900000000);   }     .smoke-base .dialog {    top: 25%;    width: 30%;    left: 50%;    margin-left: -20%;   }     .smoke-base .dialog-inner {     padding: 15px;       color:#202020;   }     .smoke {     background-color: rgba(255,255,255,0.95);     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#ffffff);    box-shadow: 0 2px 8px #000;   }       .dialog-buttons button {     background-color: rgba(0,0,0,.85);     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#222222,endColorstr=#222222);     border-radius: 0;     color: #fff;   }     button.cancel {     background-color: rgba(0,0,0,.40);     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#444444,endColorstr=#444444);   }     .queue{    display:none;   }

alert()效果--smoke.alert(string, fn,obj)

string--弹出框文字内容,fn--回调函数,obj--{ok:'按钮文字',cancel:'取消按钮文字',classname:'叠加的弹窗框样式名'}

/*alert*/   $('a[rel="demo-alert"]').on('click',function(e){    e.preventDefault();    smoke.alert("Wouldn't it be funny if Animal Collective was an actual<br /> collective of actual animals?", function(e){     smoke.signal('No really...it totally would, dude.<br />I mean, think about it.');    },{     ok: "Yep", //确定按钮文字     cancel: "Nope", //取消按钮文字     classname: "custom-class" //弹出框样式    });   });

confirm效果--smoke.confirm(string,fn,obj)

/*confirm*/   $('a[rel="demo-confirm"]').on('click',function(e){    e.preventDefault();    smoke.confirm("Slippery breath inside<br /> banjo melted. Runny smoky. ",function(e){     if (e){ //确定按钮回调      smoke.signal('Perfect. We\'ll be in touch.'); //点击按钮响应lightbox效果,基本上看不见,因为没有设置延迟时间 smoke.signal()会闪一下就消失了。     }else{ //取消按钮回调      smoke.signal('Please...me so sorry. You look good in dress, you look better on my floor.');     }    }, {     reverseButtons: true, //确定和取消按钮哪个在前;true ok按钮在前,false cancel按钮在前     classname: "custom-class",     ok: "AGREE", //确定文字     cancel: "DISAGREE" //取消文字    });   });

quiz效果--smoke.quiz(string, fn, obj),多按钮(最多三个)

/*quiz*/   $('a[rel="demo-quiz"]').on('click',function(e){    e.preventDefault();      smoke.quiz('Which of these things<br /> is the worst thing?', function (e){     if (e == 'DISCO'){  //点击每个按钮的触发的效果      smoke.signal('nope. it\'s funk.');     }     if (e == 'REGGAE'){      smoke.signal('nope. it\'s disco.');       }          if (e == 'FUNK'){      smoke.signal('nope. it\'s reggae.');     }    },      {      button_1 : "DISCO",  //多按钮(最多三个)      button_2 : "REGGAE",       button_3 : "FUNK",       button_cancel: "NONE OF THEM" //取消按钮     }    );   });

signal,设置弹出框,没有按钮,可以设置弹框消失的延迟时间

/*signal*/   $('a[rel="demo-signal"]').on('click',function(e){    e.preventDefault();    smoke.signal('Congratulations! You have just one a free iPod Touch!', function(){}, {duration: 5000, classname: "custom-class"});  //duration:5000设置延迟时间为5000毫秒   });

prompt,带有输出框的alert效果

/*prompt*/   $('a[rel="demo-prompt"]').on('click',function(e){    e.preventDefault();    o.prompt_demo(1);   });  var o={   prompt_demo: function(ver){     var q = 'What\'s in the bag?';  //设置提示文字,这个是用来遵循文本框的内容约束规则。文本框如果是必填的话就会需要,在用户移除文本框的时候就会触发提示文字。     if (ver == 2){       q = 'No no, you HAVE to answer.<br /> What\'s in the bag?';     }     smoke.prompt(q, function(e){       if (e){  //ok按钮的效果         smoke.signal('You have no idea how badly<br /> I need a bag of '+e+'. <br /><br /> Give it to me. Right now.<br /><br />');       }else{  //cancel按钮效果         o.prompt_demo(2);       }   }, {    reverseButtons: true,  //翻转按钮顺序    value: 'hammers', //文本框里的默认内容    ok: 'Have a look', //确定按钮文字    cancel: 'None of your business' //取消按钮文字   });    }  }

鼠标移除文本框后或单击cancel按钮

来自: http://www.cnblogs.com/zhang-jian/p/5127920.html