写一个简单的基于jquery的对话框，可以封装之后放到自己的项目里面，下面直接给出css代码和js代码，以及html代码

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");就可以 不知什么原因

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。