(原文来自博客园 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");就可以 不知什么原因