jquery重写一个对话框

(原文来自博客园 wuchao.cnblogs.com)

写一个简单的基于jquery的对话框

css:

 1 #dialog
 2         {
 3             border:solid 1px #CCC;
 4             width:300px;
 5             height:150px;
 6             background-color:#e5e5e5;
 7             position:fixed;
 8         }
 9         .title
10         {
11             width:100%;
12             height:30px;
13             background:#dadada;
14             color:#a68687;
15             font-size:22px;
16         }
17         #TContent
18         {
19             line-height:35px;
20             margin-left:5px;
21         }
22         .content
23         {
24             height:80px;
25             width:100%;
26             text-align:center;
27         }
28         #CContent
29         {
30             line-height:25px;
31             font-size:16px;
32         }
33         .buttons
34         {
35             width:100%;
36             text-align:center;
37         }
38         #TTButton1,#TTButton2
39         {
40             cursor:pointer;
41             width:60px;
42             height:30px;
43             margin:0 5px 0 5px;
44             border:0 none;
45             color:White;
46         }

 

js:

 1 $.extend({
 2             confirms: function (options) {
 3                 var defaults = {
 4                     title: "Delete Confirmation",
 5                     message: "You are about to delete this item. <br />It cannot be restored at a later time! Continue?",
 6                     buttons: {
 7                         "Yes": { 'class': 'blue', 'action': function () { alert("你点击了Yes"); } },
 8                         "No": { 'class': 'gray', 'action': function () { $("#dialog").remove(); } }
 9                     }
10                 };
11                 var opts = $.extend(defaults, options);
12 
13                 $("<div id='dialog'><div class='title'><span id='TContent'>" + defaults.title +
14                  "</span></div><div class='content'><span id=CContent>" + defaults.message +
15                  "</span></div><div class='buttons'><input id='TTButton1' style='background-color:" +
16                  defaults.buttons['Yes']['class'] + "' type='button' value='Yes' /><input id='TTButton2' type='button' style='background-color:" +
17                  defaults.buttons['No']['class'] + "' value='No' /></div></div>").appendTo("body");
18 
19                 $("#TTButton1").bind("click", defaults.buttons['Yes']['action']);
20                 $("#TTButton2").bind("click", defaults.buttons['No']['action']);
21 
22                 $("#dialog").css("top", ($(document).height() - $("#dialog").height()) / 2 - 100);
23                 $("#dialog").css("left", ($(document).width() - $("#dialog").width()) / 2);
24             }
25         });
26         function test() {
27             $.confirms({
28                 title: "测试",
29                 message: "这是一个测试对话框！",
30                 buttons:{
31                             "Yes":{'class':'red','action':function () { alert("你对cx说：真2！"); }},
32                             "No": { 'class': 'gray', 'action': function () { $("#dialog").remove(); } }
33                         }
34             });
35         }

html测试代码：

<input id="Button1" type="button" value="button" onclick="test();" />

简简单单，完成咯

遇到的问题：$("123").appendTo("p");无效 $("<b>123</b>").appendTo("p");就可以 不知什么原因

posted @ 2013-08-22 10:41  Uoolo  阅读(1176)  评论(0)  编辑  收藏  举报