jquery 美化彈出提示 漂亮的Dialog 對話框

三個不同的效果,分別是普通的警告,確認/取消,帶一個輸入框

本例用瞭jquery.alertify.js,請到演示頁面查看

css文件也請到演示頁面查看
 

jquery 美化彈出提示 漂亮的Dialog 對話框

演示

 

 

JavaScript Code

<script type="text/javascript">  

$(document).ready(function() {  

    $(".alert").click(function() {  

        var message = "<h3>Alert Dialog</h3><p>Example of an <strong>Alert Dialog</strong>. You can put any message over here.</p><br/>";  

  

        alertify.alert(message);  

    });  

  

    $(".confirm").click(function() {  

        var message = "<h3>Confirm Dialog</h3><p>Do you want to confirm this?</p><br/>";  

  

        alertify.confirm(message, function (e) {  

            if(e) {  

                alertify.success("You clicked <strong>OK</strong>");  

            } else {  

                alertify.error("You clicked <strong>Cancel</strong>");  

            }  

        });  

    });  

  

    $(".prompt").click(function() {  

        var message = "<h3>Prompt Dialog</h3><p>Please enter a value over here.</p><br/>";  

  

        alertify.prompt(message, function (e, str) {  

            if(e) {  

                alertify.success("You typed <strong>"+str+"</strong>");               

            } else {  

                alertify.error("You clicked <strong>Cancel</strong>");  

            }  

        }, "Enter a value");  

    });  

});  

</script>  

 

XML/HTML Code

<p class="container">  

        <ul>  

            <li><a href="#" class="alert">警告對話框</a></li>  

            <li><a href="#" class="confirm">確認/取消對話框</a></li>  

            <li><a href="#" class="prompt">帶輸入框的對話框</a></li>  

        </ul><br/>  

  

          

  

    </p>  

 

發佈留言