Question

我遇到这种情况：

var div = document.createElement('div');
div.id="content";

$(div).dialog('open');

div的内容在对话框中打开但我无法设置样式。我试图通过id或className访问它。问题是我希望内容填充对话框的100％宽度和高度。

我看起来像JQuery以某种方式覆盖了我的CSS。请帮忙......

CSS：

#content {
    width:100%;
    height:100%;
    background-color:black;
}

Answer 1

对于你可以这样给出的风格，它可以帮助你

#content{
    width:100%;
    height:100%;
    background-color:black;
    position:fixed;
    top:0;
    left:0
}

Answer 2

尝试更高级但稍微改善对话：）

    $("#myDialog").dialog(
    {                                
        modal: true,
        show: "fade",
        hide: "fade",
        draggable: false,
        resizable: false,
        closeOnEscape: false,
        width: 400,
        position: "top",
        buttons: 
        {
            Close:  function()
                    { 
                        $(this).dialog('close');                                
                    }
        },
        open:   function()
                {        
                    /* styling dialog */
                    $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").remove();             
                    $(this).parents(".ui-dialog").css("padding", 5);  
                    $(this).parents(".ui-dialog").css("border", 0);
                    $(this).parents(".ui-dialog:first").find(".ui-dialog-content").css("padding", 0);

                    $(this).css("-webkit-box-shadow", "0px 0px 10px rgba(0, 0, 0, 0.8)");
                    $(this).parents(".ui-dialog").css("-webkit-box-shadow", "0px 0px 10px rgba(0, 0, 0, 0.8)");
                    $(this).parents(".ui-dialog").css("-moz-box-shadow", "0px 0px 10px rgba(0, 0, 0, 0.8)");                        
    });

样式Jquery对话框内容div

2 个答案: