在一些表單等需要彈窗提醒的時候，每個瀏覽器都有一個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按鈕
