jQuery UI 대화 상자 개별 CSS 스타일링

UI 대화 상자를 사용하여 모달 대화 상자의 스타일을 전통적인 대화 상자와 별개의 고유 한 CSS로 지정하려고합니다. 본질적으로 각각 다른 모양을 나타내는 두 개의 jQuery 대화 상자가 있습니다.jQuery UI 대화 상자 개별 CSS 스타일링

내가 예를 들어, 하나의 스타일했습니다

<div id="dialog_style1" class="dialog1 hidden">One content</div>

다른

<div id="dialog_style2" class="dialog2 hidden">Another content</div>

불행하게도, 난 나타났습니다 그

같은 대화 상자의 스타일 부분에 별도의 CSS를 사용하여

.dialog1 .ui-dialog-titlebar { display:none; } 
.dialog2 .ui-dialog-titlebar { color:#aaa; }

.ui-dialog-titlebar에는가 없기 때문에 작동하지 않습니다. 10, 나는 플러그인을 깨지 않고 addClass을 수행 할 수 없습니다.

body과 같은 요소는 고유 한 클래스/ID (원하는 코드에 따라 다름)를 가질 수도 있지만 같은 페이지에 두 개의 대화 상자가있는 것을 방지 할 수 있습니다.

어떻게하면됩니까?

출처

2009-08-20 Rio

실행 대화 상자가 Ajax에서 호출 후 즉시 다음

이

$(".ui-dialog-titlebar").hide(); 
    $(".ui-dialog").addClass("customclass");

이 방금 연되는 대화에 적용하므로 사용 각각에 대해 변경 될 수 있습니다.

(이 신속한 답변은 스택 오버플로 다른 응답을 기반으로합니다.)

출처

2009-08-20 20:18:25 Rio

필자의 경우 background-color를 덮어 쓰기 때문에 $ (".ui-dialog-titlebar") removeClass ("ui-widget-header")를 추가해야했다. – maxivis

제 경우에는 ui-dialog-content가 트릭을했습니다. $ (".ui-dialog-content"). addClass ("customclass"); –

는이 같은 제목에 클래스를 추가 할 수 있습니다

#dialog_style1 .ui-dialog-titlebar { display:none; } 
#dialog_style2 .ui-dialog-titlebar { color:#aaa; }

파이어 폭스에서 페이지를로드하는 것입니다 위해 내가 줄 수있는 최고의 추천의를 엽니 다

$('#dialog_style1').siblings('div.ui-dialog-titlebar').addClass('dialog1');

출처

2009-08-20 19:45:25

오른쪽이지만'.ui-dialog-titlebar'에는'.dialog1' 클래스가 없습니다. .dialog1 {display : none;} w 내가 원하지 않는 대화 상자의 전체 내용을 숨길 수 있습니다. – Rio

.ui-dialog-titlebar의 위치는 어디입니까? –

jQuery 대화 상자 (http://docs.jquery.com/UI/Dialog/Theming) – Rio

이러한 시도 대화 상자를 열고 Firebug로 검사 한 다음 콘솔에서 다른 선택기를 시도하고 어떤 것이 작동하는지 확인하십시오. 다른 descendant selectors 중 일부를 사용해야 할 수도 있습니다.

출처

2009-08-20 20:09:26

예. 그것은 작동하지 않습니다, 나는 방화범이 끌리는 것을 사용하여, 시도했습니다. 그것이 내가 게시 한 이유입니다. – Rio

.ui-dialog-titlebar는 * dialog_style1 주위를 감싸는 것이므로 # dialog_style1은 대화 상자의 내용에 잘 적용되지만 제목 자체에는 적용되지 않습니다. – Rio

이 작업을 수행하는 표준 방법은 jQuery를 UI의이 CSS Scopes 함께 :

이

<div class="myCssScope"> 
    <!-- dialog goes here --> 
</div>

불행히도, jQuery를 UI 대화 상자가 이동 DOM 요소를 문서 끝에 추가하여 잠재적 인 Z- 색인 문제를 해결할 수 있습니다. 즉, 범위 지정이 작동하지 않습니다 (더 이상 ".myCssScope"조상이 없음).

크리스토퍼 헤롤드 designed a workaround 나는 implemented as a jQuery plugin인데, 아마도 도움이 될 것입니다.

출처

2009-08-20 20:21:36 orip

는 UI dialog documentation에 따르면, 대화 플러그인은 다음과 같이 생성됩니다

당신이 jQuery의 가까운 곳() 방법을 사용하여 정확하게 첫 번째 또는 두 번째 대화로 모든 클래스에 추가 할 수있는 것을 의미

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"> 
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> 
     <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span> 
     <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a> 
    </div> 
    <div class="ui-dialog-content ui-widget-content" id="dialog_style1"> 
     <p>One content</p> 
    </div> 
</div>

.예 :

$('#dialog_style1').closest('.ui-dialog').addClass('dialog_style1'); 

$('#dialog_style2').closest('.ui-dialog').addClass('dialog_style2');

다음으로 CSS it.

출처

2011-04-08 12:09:14 Vasilij

나는 가장 가까운 해결책을 좋아한다 – gigi

대화 상자의 현재 버전에는 ID와 함께 사용할 수있는 "dialogClass"옵션이 있습니다. 나는 비슷한 대답을 찾으려고 할 때 예를 들어 ,

$('foo').dialog({dialogClass:'dialog_style1'});

그런 다음 CSS이 문제는 나를 위해 켜져

.dialog_style1 {color:#aaa;}

출처

2011-07-21 21:10:27 MorganTiley

이것은 실제로 대답보다 더 많은 것을 도왔다. 내 자신의 사용자 정의 스타일을 정의하여 모든 UI 요소를 체인 클래스로 다시 정의 할 수 있습니다. 즉 .dialog_style1 .ui-dialog-title -etc. 선택한 대답은 머리글과 바닥 글이 아니라 대화 상자의 주요 내용을 다시 정의합니다. –

정적 CSS 클래스를 사용할 수 있다면 javascript를 사용하지 않는 것이 좋습니다. 이 대답은 허용 된 것보다 낫습니다. – RomanKapitonov

woot는 40 번째 upvote를 제공했습니다. 좋은 대답입니다! – Loktar

될 것이다. 고려 :

abc이 'CSS 래퍼'의 이름입니다

$('.ui-dialog').wrap('<div class="abc" />'); 
    $('.ui-widget-overlay').wrap('<div class="abc" />');

- 나는 Evgeni Nabokov에서 답을 찾을 스택 오버플로 질문 Custom CSS scope and jQuery UI dialog themes를 참조하십시오. jQuery UI 대화 상자에서 사용하는 CSS 래퍼에 대한 자세한 내용은 다음을 참조하십시오. 그러나 CSS 래퍼 의 문제를 실제로 해결하지는 않지만 대화 상자를 사용하십시오. 위의 설명이 필요하면 Using Multiple jQuery UI Themes on a Single Page . (필라멘트 블로그)

출처

2012-08-28 13:37:24 Steve

질문이 몇 년 전이지만이 답변을 추가해 주셔서 감사합니다. 이것은 나를 도왔다! =) –

난 그냥 인라인 스타일에 jQuery를 클래스를 재정 의하여 사용자 지정 스타일을 만든 페이지의 상단에 그래서, 당신이 JQuery와 CSS가 연결되어 바로 그 후 수정해야하는 클래스를 오버라이드 (override)가 있습니다.

<head> 
    <link href="/Content/theme/base/jquery.ui.all.css" rel="stylesheet"/> 

    <style type="text/css"> 
     .ui-dialog .ui-dialog-content 
     { 
      position: relative; 
      border: 0; 
      padding: .5em 1em; 
      background: none; 
      overflow: auto; 
      zoom: 1; 
      background-color: #ffd; 
      border: solid 1px #ea7; 
     } 

     .ui-dialog .ui-dialog-titlebar 
     { 
      display:none; 
     } 

     .ui-widget-content 
     { 
      border:none; 
     } 
    </style> 
</head>

출처

2013-04-16 20:23:24 Steef

글쎄, 고마워!. 내 길을 발견 하기엔 너무 고개를 끄덕였다. 4 css jquery js 파일 톤. 나는 너 길을 갔어. 내 레이아웃에서 가장 낮은 CSS 파일을 발견하고 바로 아래에 전체 태그를 넣어! 당신! 제목을 원했고 작동하도록 설정했지만 닫기 버튼 대신 "x"를 사용하고 싶습니다. 나 밖에 기다리고있어. – JustJohn

jQuery UI 대화 상자 개별 CSS 스타일링

답변

관련 문제