如何自定义jquery对话框?

时间:2014-03-13 15:06:09

标签: jquery html

我试图在jQuery中获取并自定义一个对话框。如何在对话框标题栏中更改颜色?

我有jQuery代码,

$("#dialog").dialog("open");    
var state = true;
if (state) {
    $("#dialog").animate({
        backgroundColor: "#FFEDB8",
        color: "black",                
    });

$("#dialog").dialog({ autoOpen: false });

$(function() {
    $("#dialog").dialog({   
        title: "Acquaintance Details",
        modal: true,
        buttons: {
            Invite: function() {
                $(this).dialog("close");
            },
            Cancel: function() {
                $(this).dialog("close");
            }               
        }
    });
});

然后将html代码改为

<div id="dialog">
    <p>Are u want add </p>
    <form>
       <fieldset>
            <label id="fristname"></label>
            <br><label id="lastname"></label>
            <br><label id="mobilenumber"></label>
       </fieldset>
</form>
</div>

2 个答案:

答案 0 :(得分:1)

这是一个例子。

使用您想要的样式在css (比如youCustomClass)中创建一个类,使用下面的jQuery代码将其添加到对话框标题中。

$(function () {
     $("#msg").dialog({
        open: function () {
           $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("youCustomClass");
                          }        
          });    
      });

答案 1 :(得分:0)

只需根据您的要求设置对话框样式。

请检查我为演示而创建的fiddle

.ui-dialog-titlebar
{
 background-color: #FF0000 !important;
}

或尝试将此添加到您的风格