[JQUERY] 어떻게 jQuery를 UI 대화 상자에서 닫기 버튼을 제거하려면?
JQUERY어떻게 jQuery를 UI 대화 상자에서 닫기 버튼을 제거하려면?
해결법
-
1.나는 (버튼 및 가죽 찾을 open 함수를 오버라이드 (override) 세 번째 줄에주의)이 결국 일을 발견했다 :
나는 (버튼 및 가죽 찾을 open 함수를 오버라이드 (override) 세 번째 줄에주의)이 결국 일을 발견했다 :
$("#div2").dialog({ closeOnEscape: false, open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog || ui).hide(); } });
다음 CSS를 너무 사용할 수있는 모든 대화 상자에서 닫기 버튼을 숨기려면
.ui-dialog-titlebar-close { visibility: hidden; }
-
2.여기에 그냥 페이지에있는 모든 대화 상자를 타고하지 않는 CSS를 사용하여 다른 옵션입니다.
여기에 그냥 페이지에있는 모든 대화 상자를 타고하지 않는 CSS를 사용하여 다른 옵션입니다.
CSS는
.no-close .ui-dialog-titlebar-close {display: none }
html로
<div class="selector" title="No close button"> This is a test without a close button </div>
자바 스크립트.
$( ".selector" ).dialog({ dialogClass: 'no-close' });
작업 예
-
3."최고"대답은 여러 대화 상자에 대한 좋은하지 않습니다. 여기에 더 나은 솔루션입니다.
"최고"대답은 여러 대화 상자에 대한 좋은하지 않습니다. 여기에 더 나은 솔루션입니다.
open: function(event, ui) { //hide close button. $(this).parent().children().children('.ui-dialog-titlebar-close').hide(); },
-
4.대신 자바 스크립트의 닫기 버튼을 숨기기 위해 CSS를 사용할 수 있습니다 :
대신 자바 스크립트의 닫기 버튼을 숨기기 위해 CSS를 사용할 수 있습니다 :
.ui-dialog-titlebar-close{ display: none; }
당신은 모든 조동사에 영향을 원하지 않는 경우, 당신은 같은 규칙을 사용할 수 있습니다
.hide-close-btn .ui-dialog-titlebar-close{ display: none; }
그리고 대화 상자 상단 노드에 .hide-근접 BTN 적용
-
5.다윗 공식 페이지에 표시 및 제안 :
다윗 공식 페이지에 표시 및 제안 :
스타일을 만듭니다
.no-close .ui-dialog-titlebar-close { display: none; }
그런 다음, 당신은 단순히 숨기기 위해 어떠한 대화에 노 가까운 클래스를 추가 할 수 있습니다 그것은 닫기 버튼입니다 :
$( "#dialog" ).dialog({ dialogClass: "no-close", buttons: [{ text: "OK", click: function() { $( this ).dialog( "close" ); } }] });
-
6.나는이 더 나은 생각합니다.
나는이 더 나은 생각합니다.
open: function(event, ui) { $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').hide(); }
-
7.당신이 요소) (.dialog라고 한 후에는 이벤트 핸들러를 사용하지 않고 편리한 시간에 닫기 버튼 (및 다른 대화 마크 업)을 찾을 수 있습니다 :
당신이 요소) (.dialog라고 한 후에는 이벤트 핸들러를 사용하지 않고 편리한 시간에 닫기 버튼 (및 다른 대화 마크 업)을 찾을 수 있습니다 :
$("#div2").dialog({ // call .dialog method to create the dialog markup autoOpen: false }); $("#div2").dialog("widget") // get the dialog widget element .find(".ui-dialog-titlebar-close") // find the close button for this dialog .hide(); // hide it
대체 방법 :
대화 이벤트 핸들러 내부에서,이 요소 존재 "dialogged"와 $ (이) .parent ()을 의미 때문에 대화 마크 업 용기를 말한다 :
$("#div3").dialog({ open: function() { // open event handler $(this) // the element being dialogged .parent() // get the dialog widget element .find(".ui-dialog-titlebar-close") // find the close button for this dialog .hide(); // hide it } });
참고로,이 같은 대화 마크 업 외모 :
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"> <!-- ^--- this is the dialog widget --> <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"> <span class="ui-dialog-title" id="ui-dialog-title-dialog">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 id="div2" style="height: 200px; min-height: 200px; width: auto;" class="ui-dialog-content ui-widget-content"> <!-- ^--- this is the element upon which .dialog() was called --> </div> </div>
여기 데모
-
8.로버트 맥클레인의 대답은 나를 위해 작동하지 않았다.
로버트 맥클레인의 대답은 나를 위해 작동하지 않았다.
그러나 이것은 나를 위해 작업을 수행합니다 :
$("#div").dialog({ open: function() { $(".ui-dialog-titlebar-close").hide(); } });
-
9.
$("#div2").dialog({ closeOnEscape: false, open: function(event, ui) { $('#div2').parent().find('a.ui-dialog-titlebar-close').hide();} });
-
10.위의 작품 없음. 정말 작동하는 솔루션입니다 :
위의 작품 없음. 정말 작동하는 솔루션입니다 :
$(function(){ //this is your dialog: $('#mydiv').dialog({ // Step 1. Add an extra class to our dialog to address the dialog directly. Make sure that this class is not used anywhere else: dialogClass: 'my-extra-class' }) // Step 2. Hide the close 'X' button on the dialog that you marked with your extra class $('.my-extra-class').find('.ui-dialog-titlebar-close').css('display','none'); // Step 3. Enjoy your dialog without the 'X' link })
당신을 위해 작동하는지 확인하시기 바랍니다.
-
11.버튼을 숨길 수있는 가장 좋은 방법은 그것의 데이터 아이콘 속성을 필터링 할 수 있습니다 :
버튼을 숨길 수있는 가장 좋은 방법은 그것의 데이터 아이콘 속성을 필터링 할 수 있습니다 :
$('#dialog-id [data-icon="delete"]').hide();
-
12.http://jsfiddle.net/marcosfromero/aWyNn/
http://jsfiddle.net/marcosfromero/aWyNn/
$('#yourdiv'). // Get your box ... dialog(). // ... and turn it into dialog (autoOpen: false also works) prev('.ui-dialog-titlebar'). // Get title bar,... find('a'). // ... then get the X close button ... hide(); // ... and hide it
-
13.하여 클래스를 비활성화, 짧은 코드 :
하여 클래스를 비활성화, 짧은 코드 :
$(".ui-dialog-titlebar-close").hide();
사용될 수있다.
-
14.클래스 'UI - 대화 - 제목 표시 줄 닫기', 그래서 당신의 초기 호출 (.dialog하는 후를 가지고 위젯 대화)에 의해 추가 된 닫기 버튼, 다시 닫기 버튼을 제거하려면이 같은 문을 사용할 수 있습니다 : 효과가있다..
클래스 'UI - 대화 - 제목 표시 줄 닫기', 그래서 당신의 초기 호출 (.dialog하는 후를 가지고 위젯 대화)에 의해 추가 된 닫기 버튼, 다시 닫기 버튼을 제거하려면이 같은 문을 사용할 수 있습니다 : 효과가있다..
$( 'a.ui-dialog-titlebar-close' ).remove();
-
15.나는 대화 상자의 close 이벤트를 잡을 수있어. 이 코드는 다음
(#dhx_combo_list)를 제거합니다 :나는 대화 상자의 close 이벤트를 잡을 수있어. 이 코드는 다음
(#dhx_combo_list)를 제거합니다 :open: function(event, ui) { //hide close button. $(this).parent().children().children('.ui-dialog-titlebar-close').click(function(){ $("#dhx_combo_list").remove(); }); },
16.
$(".ui-button-icon-only").hide();
17.당신은 또한 당신의 헤더 행을 제거 할 수 있습니다 :
당신은 또한 당신의 헤더 행을 제거 할 수 있습니다 :
... div>이는 닫기 버튼을 제거한다.
18.
document.querySelector('.ui-dialog-titlebar-close').style.display = 'none'
19.(당신의 자바 스크립트에서이 작업을 수행) : 쉬운 방법은 달성하기 위해
(당신의 자바 스크립트에서이 작업을 수행) : 쉬운 방법은 달성하기 위해
$("selector").dialog({ autoOpen: false, open: function(event, ui) { // It'll hide Close button $(".ui-dialog-titlebar-close", ui.dialog | ui).hide(); }, closeOnEscape: false, // Do not close dialog on press Esc button show: { effect: "clip", duration: 500 }, hide: { effect: "blind", duration: 200 }, .... });
20.나는 내 응용 프로그램에서 여러 장소에서이 일을하고 발견 이후, 나는 플러그인에 싸서 :
나는 내 응용 프로그램에서 여러 장소에서이 일을하고 발견 이후, 나는 플러그인에 싸서 :
(function ($) { $.fn.dialogNoClose = function () { return this.each(function () { // hide the close button and prevent ESC key from closing $(this).closest(".ui-dialog").find(".ui-dialog-titlebar-close").hide(); $(this).dialog("option", "closeOnEscape", false); }); }; })(jQuery)
사용 예 :
$("#dialog").dialog({ /* lots of options */ }).dialogNoClose();
21.나는 한 라이너의 팬이다 (그들이 일하는!). 여기에 나를 위해 작동 것입니다 :
나는 한 라이너의 팬이다 (그들이 일하는!). 여기에 나를 위해 작동 것입니다 :
$("#dialog").siblings(".ui-dialog-titlebar").find(".ui-dialog-titlebar-close").hide();
22.방법이 순수 CSS 라인을 사용하는 방법에 대해? 나는이 지정된 ID와 대화의 깨끗한 솔루션을 찾을 수 있습니다 :
방법이 순수 CSS 라인을 사용하는 방법에 대해? 나는이 지정된 ID와 대화의 깨끗한 솔루션을 찾을 수 있습니다 :
.ui-dialog[aria-describedby="IdValueOfDialog"] .ui-dialog-titlebar-close { display: none; }
23.당신은 아래의 코드와 닫기 버튼을 제거 할 수 있습니다. 유용한 싸울 수뿐만 아니라 다른 옵션이 있습니다.
당신은 아래의 코드와 닫기 버튼을 제거 할 수 있습니다. 유용한 싸울 수뿐만 아니라 다른 옵션이 있습니다.
$('#dialog-modal').dialog({ //To hide the Close 'X' button "closeX": false, //To disable closing the pop up on escape "closeOnEscape": false, //To allow background scrolling "allowScrolling": true }) //To remove the whole title bar .siblings('.ui-dialog-titlebar').remove();
from https://stackoverflow.com/questions/896777/how-to-remove-close-button-on-the-jquery-ui-dialog by cc-by-sa and MIT license
'JQUERY' 카테고리의 다른 글
[JQUERY] 캐싱 필수 스크립트에서 방지 RequireJS (0) 2020.10.18 [JQUERY] jQuery를 체크 박스 상태 변경 이벤트를 확인 (0) 2020.10.18 [JQUERY] jQuery를 사용하여 폼 입력 필드를 얻? (0) 2020.10.18 [JQUERY] 어떻게 방법과 jQuery 플러그인을 만드는 방법? (0) 2020.10.18 [JQUERY] 무료있는 jqGrid에 remapColumnsByName와 remapColums를 교체하는 방법 (0) 2020.10.18