我正在尝试将 jQuery UI 对话框的默认样式更改为与此类似的样式 -
我得到它来关闭更改 jQuery UI 中的一些 CSS。
.ui-widget {
font-family: Verdana,Arial,sans-serif;
font-size: .8em;
}
.ui-widget-content {
background: #F9F9F9;
border: 1px solid #90d93f;
color: #222222;
}
.ui-dialog {
left: 0;
outline: 0 none;
padding: 0 !important;
position: absolute;
top: 0;
}
#success {
padding: 0;
margin: 0;
}
.ui-dialog .ui-dialog-content {
background: none repeat scroll 0 0 transparent;
border: 0 none;
overflow: auto;
position: relative;
padding: 0 !important;
}
.ui-widget-header {
background: #b0de78;
border: 0;
color: #fff;
font-weight: normal;
}
.ui-dialog .ui-dialog-titlebar {
padding: 0.1em .5em;
position: relative;
font-size: 1em;
}
HTML:
<div id="popup-msg">
<div id="loading">
<h2>Loading...</h2>
<h3>Please wait a few seconds.</h3>
</div>
<div id="success" title="Hurray,">
<p>User table is updated.</p>
</div>
</div>
但是当我添加这种样式时,它适用于我所有的对话框。谁能告诉我如何避免这个问题。
谢谢。
最佳答案
参见 https://jsfiddle.net/qP8DY/24/
您可以直接在 HTML 中或通过添加到 dialogClass 选项在 JavaScript 中向 div#success 添加一个类(例如我示例中的“success-dialog”),就像我所做的那样。
$('#success').dialog({
height: 50,
width: 350,
modal: true,
resizable: true,
dialogClass: 'no-close success-dialog'
});
然后只需将 success-dialog 类添加到您的 CSS 规则中即可。要指示应用了两个(或更多)类的元素,只需将它们全部写在一起,中间不要有空格。例如:
.ui-dialog.success-dialog {
font-family: Verdana,Arial,sans-serif;
font-size: .8em;
}
关于css - jQuery UI 对话框的自定义样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17386839/