CSS jquery ui 对话框的自定义样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17386839/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom style to jquery ui dialogs
提问by TNK
I am trying to change jquery ui dialog's default styles to something similar to this -
我正在尝试将 jquery ui 对话框的默认样式更改为与此类似的样式 -
I got it to close changing some CSS in 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 :
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>
But when I add this style its apply to all my dialogs. Can anybody tell me how can I avoid from this problem.
但是当我添加这种风格时，它适用于我所有的对话框。谁能告诉我如何避免这个问题。
Thank you.
谢谢你。
回答by Rob Kovacs
See http://jsfiddle.net/qP8DY/24/
见http://jsfiddle.net/qP8DY/24/
You can add a class (such as "success-dialog" in my example) to div#success, either directly in your HTML, or in your JavaScript by adding to the dialogClass option, as I've done.
您可以直接在 HTML 中或通过添加到 dialogClass 选项在 JavaScript 中向 div#success 添加一个类（例如我的示例中的“success-dialog”），就像我所做的那样。
$('#success').dialog({
height: 50,
width: 350,
modal: true,
resizable: true,
dialogClass: 'no-close success-dialog'
});
Then just add the success-dialog class to your CSS rules as appropriate. To indicate an element with two (or more) classes applied to it, just write them all together, with no spaces in between. For example:
然后根据需要将成功对话框类添加到您的 CSS 规则中。要指示应用了两个（或更多）类的元素，只需将它们写在一起，中间没有空格。例如：
.ui-dialog.success-dialog {
font-family: Verdana,Arial,sans-serif;
font-size: .8em;
}
回答by YoannM
You can specify a custom class to the top element of the dialog via the option dialogClass
您可以通过选项为对话框的顶部元素指定一个自定义类 dialogClass
$("#success").dialog({
...
dialogClass:"myClass",
...
});
Then you can target this class in CSS via .myClass.ui-dialog.
然后你可以在 CSS 中通过.myClass.ui-dialog.
回答by Chris Hore
The solution only solves part of the problem, it may let you style the container and contents but doesn't let you change the titlebar. I developed a workaround of sorts but adding an id to the dialog div, then using jQuery .prev to change the style of the div which is the previous sibling of the dialog's div. This works because when jQueryUI creates the dialog, your original div becomes a sibling of the new container, but the title div is a the immediately previous sibling to your original div but neither the container not the title div has an id to simplify selecting the div.
该解决方案仅解决了部分问题，它可以让您设置容器和内容的样式，但不能让您更改标题栏。我开发了各种解决方法，但向对话框 div 添加一个 id，然后使用 jQuery .prev 更改 div 的样式，该 div 是对话框 div 的前一个兄弟。这是有效的，因为当 jQueryUI 创建对话框时，您的原始 div 成为新容器的同级，但标题 div 是原始 div 的前一个同级，但容器和标题 div 都没有 id 以简化选择 div .
HTML
HTML
<button id="dialog1" class="btn btn-danger">Warning</button>
<div title="Nothing here, really" id="nonmodal1">
Nothing here
</div>
You can use CSS to style the main section of the dialog but not the title
您可以使用 CSS 为对话框的主要部分设置样式，但不能为标题设置样式
.custom-ui-widget-header-warning {
background: #EBCCCC;
font-size: 1em;
}
You need some JS to style the title
您需要一些 JS 来设置标题的样式
$(function() {
$("#nonmodal1").dialog({
minWidth: 400,
minHeight: 'auto',
autoOpen: false,
dialogClass: 'custom-ui-widget-header-warning',
position: {
my: 'center',
at: 'left'
}
});
$("#dialog1").click(function() {
if ($("#nonmodal1").dialog("isOpen") === true) {
$("#nonmodal1").dialog("close");
} else {
$("#nonmodal1").dialog("open").prev().css('background','#D9534F');
}
});
});
The example only shows simple styling (background) but you can make it as complex as you wish.
该示例仅显示简单的样式（背景），但您可以根据需要使其复杂。
You can see it in action here:
你可以在这里看到它的实际效果：
