Style Jquery dialog content div

混江龙づ霸主 提交于 2020-01-21 21:50:14

问题


I have this situation:

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

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

The content of the div opens in the dialog but I cannot style it. I tried to access it by id or className. The problem is that I want to have the content filling 100% width and height of the dialog.

I looks like JQuery somehow overrides my CSS. Please help...

CSS:

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

回答1:


for style you can give like this it may help you

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



回答2:


Try a little more advanced but making dialog a little better:)

    $("#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)");                        
    });   


来源:https://stackoverflow.com/questions/15132096/style-jquery-dialog-content-div

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!