alert 替代效果smoke.js

jopen 8年前發布 | 30K 次閱讀 Mono CSS3 JavaScript開發

在一些表單等需要彈窗提醒的時候，每個瀏覽器都有一個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' //取消按鈕文字
    });
　　}
}