问题
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