html - 设置确认框尺寸

Question

我有一个用 jquery 创建的确认框。实际上，我从 http://jqueryui.com/themeroller/#!/ 中获取了代码并根据我的需要进行调整。问题是我将它用于两种不同的情况。第一种情况，它的内容很大，所以我设置了 min-width: 60%;以确保内容适合。在第二种情况下，我的内容很少。所以我试图设置它的 max-width: 20%;以避免空白。

对于第一种情况，这是 div 声明:

<div id="show_dialog" class="ui-dialog-content ui-widget-content">

和CSS:

.ui-dialog .ui-dialog-content {
position: relative;
border: 0;
padding: .5em 1em;
background: none;
overflow: auto;
min-width: 60%;
}

.ui-widget-content {
border: 1px solid #aaaaaa;
background: #ffffff url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;
color: #222222;
min-width:60%;
}

对于第二种情况，我有这样的声明:

<div id="dialog" class="delete test" title="Action can not be reversed!"></div>

还有CSS:

.ui-dialog .ui-dialog-content {
position: relative;
border: 0;
padding: .5em 1em;
background: none;
overflow: auto;
max-width: 20%;
}

.ui-widget-content {
border: 1px solid #aaaaaa;
background: #ffffff url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;
color: #222222;
max-width:20%;
}

但是两个框的宽度相同 (60%)。

我总是很难修改别人的代码，但这让我发疯。希望我足够清楚。关于如何正确设置大小的任何想法？

更新:我尝试在这里定义宽度

$("#dialog").dialog({maxWidth: 20 } );
$("#dialog").html('<p>Are you sure you want to delete this?</p>').dialog("open");           

Answer 1

您尝试用于百分比的 dialog 小部件选项实际上以像素为单位 (ref. maxWidth)

更改样式的 jQuery 方法是使用 .css():

$(".ui-dialog .ui-dialog-content, .ui-widget-content").css("maxWidth", "20%");

另请注意，由于您使用的是自定义尺寸样式，因此您可能希望使对话框不可调整大小:

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