定制特定jquery-ui对话框的样式不是所有的对话框？ [英] customize the style for specific jquery-ui dialog box not all the dialogs?

问题描述

我在我的应用程序中使用jquery-ui对话框。现在我想自定义signin / sinup对话框，即jquery-ui对话框。没有自定义对话框看起来像：

但是当我对login.jsp页面做了改变，在样式中它改变了我不想发生但只有登录/注册对话框的应用程序的所有对话框。 CSS代码是：

  .ui-widget-header {
 background：＃343434！important; 
 border：none 
} 
 
 .ui-dialog-titlebar-close {
 background：＃1C1C1C！important; 
} 
 
 .ui-dialog {
 background：＃343434！important; 
 border：thin 1px;这个登录对话框（id =signinDialog）的
 
  

<

  $（document）.ready（function（）{
 $（＃signinDialog）。dialog 
 width：600，
 resizable：false，
 modal：true，
 autoOpen：false，
 position：['top'，157] 
} ）; 
 
 
 
 function openLoginPopup（）{
 $（＃signinDialog）。dialog（open）; 
} $ b b 

这些更改后，我得到登录/注册对话框的方式我想要的但问题是这是改变jquery-ui dialog css for all application and look like this：

我从早上就被困在这个问题上，尝试了很多方法来解决，比如
这个，但都是平的。阿特拉斯我要问这个。

我想在定制后除了登录/注册对话框之外的所有对话框保持不变。

解决方案

，正如EasyPush建议的，不会工作，因为您的内容成为DOM中对话框元素的子。由于CSS没有父选择器（请参见包含foo的CSS选择器bar？），我将无法看到使用纯CSS。

使用jQuery作为关闭按钮，例如：

  $（＃signinDialog）。parent（）。find（。ui-dialog-titlebar-close）。css（background，＃1C1C1C）;不幸的是，通过jQuery将！important规则应用到CSS是一个有点棘手的问题。您可以改用应用类，然后在CSS中将类类用！important。例如：
  $（＃signinDialog）。parent（）。find（。ui-dialog-titlebar-close ）.addClass（mySpecialClass）; 
  
与css规则一起：
  .mySpecialClass {
 background：＃1C1C1C！important; 
} 
  
 
i am using jquery-ui dialog in my application. now i want to customize the signin/sinup dialog i.e. jquery-ui dialog. without customization dialogs are looking like:


but when i made following changes to login.jsp page that too in style it is changing all the dialogs of application that i don't want to happen but only signin/signup dialog. CSS code is:
.ui-widget-header {
    background: #343434 !important;
    border: none
}

.ui-dialog-titlebar-close{
    background: #1C1C1C !important;
}

.ui-dialog {
    background: #343434 !important;
    border: thin 1px;
}
and js code for this signin dialog (id="signinDialog") is: 
$(document).ready(function() {
$("#signinDialog").dialog({
    width : 600,
    resizable : false,
    modal : true,
    autoOpen : false,
    position : ['top', 157]
});



 function openLoginPopup() {
    $("#signinDialog").dialog("open");
}
after these changes i am getting signin/signup dialog the way i want but the problem is this is changing jquery-ui dialog css for all application and looking like this:



I have been stuck in this issue from morning and tried lot of ways to resolve, like
this but all fell flat. Atlast i have to ask this. 

I want all dialogs remain same except signin/signup dialog after customization.
解决方案
Using a CSS selector for your particular dialog's ID, as EasyPush suggests, isn't going to work because your content becomes the child of the dialog element in the DOM. Since CSS doesn't have parent selectors (see CSS selector for "foo that contains bar"?), there would be no way I can see to use pure CSS. Instead, you'll need to use javascript.

Using jQuery for the close button, for instance:
$("#signinDialog").parent().find(".ui-dialog-titlebar-close").css("background","#1C1C1C");
Unfortunately, applying the "!important" rule to CSS via jQuery is a little tricky. You may instead prefer to apply a class and then style that class in CSS with "!important." Something like:
$("#signinDialog").parent().find(".ui-dialog-titlebar-close").addClass("mySpecialClass");
Along with a css rule:
.mySpecialClass{
background: #1C1C1C !important;
}


                        
这篇关于定制特定jquery-ui对话框的样式不是所有的对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！