Question

我有一个用jquery创建的确认框。实际上，我从http://jqueryui.com/themeroller/#!/获取了代码，并根据我的需要进行了调整。问题是我在两种不同的情况下使用它。在第一种情况下，它有很大的内容，所以我设置min-width：60％;确保内容适合。在第二种情况下，我的内容很少。所以我试图设置它的最大宽度：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 });

设置确认框尺寸

1 个答案: