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

三个不同的效果，分别是普通的警告,确认/取消,带一个输入框

本例用了jquery.alertify.js，请到演示页面查看

css文件也请到演示页面查看

JavaScript Code

1. <script type="text/javascript">
2. $(document).ready(function() {
3. $(".alert").click(function() {
4. var message = "<h3>Alert Dialog</h3><p>Example of an <strong>Alert Dialog</strong>. You can put any message over here.</p><br/>";
5. alertify.alert(message);
6. });
7. $(".confirm").click(function() {
8. var message = "<h3>Confirm Dialog</h3><p>Do you want to confirm this?</p><br/>";
9. alertify.confirm(message, function (e) {
10. if(e) {
11. alertify.success("You clicked <strong>OK</strong>");
12. } else {
13. alertify.error("You clicked <strong>Cancel</strong>");
14. }
15. });
16. });
17. $(".prompt").click(function() {
18. var message = "<h3>Prompt Dialog</h3><p>Please enter a value over here.</p><br/>";
19. alertify.prompt(message, function (e, str) {
20. if(e) {
21. alertify.success("You typed <strong>"+str+"</strong>");
22. } else {
23. alertify.error("You clicked <strong>Cancel</strong>");
24. }
25. }, "Enter a value");
26. });
27. });
28. </script>

XML/HTML Code

1. <div class="container">
2. <ul>
3. <li><a href="#" class="alert">警告对话框</a></li>
4. <li><a href="#" class="confirm">确认/取消对话框</a></li>
5. <li><a href="#" class="prompt">带输入框的对话框</a></li>
6. </ul><br/>
7. </div>