jquery重写一个对话框

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

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

css:

 #dialog
         {
             border:solid 1px #CCC;
             width:300px;
             height:150px;
             background-color:#e5e5e5;
             position:fixed;
         }
         .title
         {
             width:100%;
             height:30px;
             background:#dadada;
             color:#a68687;
             font-size:22px;
         }
         #TContent
         {
             line-height:35px;
             margin-left:5px;
         }
         .content
         {
             height:80px;
             width:100%;
             text-align:center;
         }
         #CContent
         {
             line-height:25px;
             font-size:16px;
         }
         .buttons
         {
             width:100%;
             text-align:center;
         }
         #TTButton1,#TTButton2
         {
             cursor:pointer;
             width:60px;
             height:30px;
             margin:0 5px 0 5px;
             border:0 none;
             color:White;
         }

js:

 $.extend({
             confirms: function (options) {
                 var defaults = {
                     title: "Delete Confirmation",
                     message: "You are about to delete this item. <br />It cannot be restored at a later time! Continue?",
                     buttons: {
                         "Yes": { 'class': 'blue', 'action': function () { alert("你点击了Yes"); } },
                         "No": { 'class': 'gray', 'action': function () { $("#dialog").remove(); } }
                     }
                 };
                 var opts = $.extend(defaults, options);

                 $("<div id='dialog'><div class='title'><span id='TContent'>" + defaults.title +
                  "</span></div><div class='content'><span id=CContent>" + defaults.message +
                  "</span></div><div class='buttons'><input id='TTButton1' style='background-color:" +
                  defaults.buttons['Yes']['class'] + "' type='button' value='Yes' /><input id='TTButton2' type='button' style='background-color:" +
                  defaults.buttons['No']['class'] + "' value='No' /></div></div>").appendTo("body");

                 $("#TTButton1").bind("click", defaults.buttons['Yes']['action']);
                 $("#TTButton2").bind("click", defaults.buttons['No']['action']);

                 $("#dialog").css("top", ($(document).height() - $("#dialog").height()) / 2 - 100);
                 $("#dialog").css("left", ($(document).width() - $("#dialog").width()) / 2);
             }
         });
         function test() {
             $.confirms({
                 title: "测试",
                 message: "这是一个测试对话框！",
                 buttons:{
                             "Yes":{'class':'red','action':function () { alert("你对cx说：真2！"); }},
                             "No": { 'class': 'gray', 'action': function () { $("#dialog").remove(); } }
                         }
             });
         }

html测试代码：

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

简简单单，完成咯

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