您的位置:首页 > Web前端 > JQuery

jquery 美化弹出提示 漂亮的Dialog 对话框

2013-11-10 12:44 459 查看
三个不同的效果,分别是普通的警告,确认/取消,带一个输入框本例用了jquery.alertify.js,请到演示页面查看css文件也请到演示页面查看

演示  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<div 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/>  
  
          
  
    </div>  
 
原文地址:http://www.freejs.net/article_biaodan_83.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: