jQuery UI 대화 상자에서 닫기 버튼을 제거하는 방법

jQuery UI 대화 상자에서 닫기 버튼을 제거하는 방법

jQuery UI에서 만든 대화 상자에서 닫기 버튼(오른쪽 상단 모서리에 있는 X)을 제거하려면 어떻게 해야 합니까?

결국 이 기능이 작동한다는 것을 알게 되었습니다(버튼을 찾아서 숨기는 열기 기능을 덮어쓰는 세 번째 줄에 주목하십시오).

$("#div2").dialog({
    closeOnEscape: false,
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close", ui.dialog || ui).hide();
    }
});

모든 대화상자에서 닫기 버튼을 숨기려면 다음 CSS도 사용할 수 있습니다.

.ui-dialog-titlebar-close {
    visibility: hidden;
}

여기에서는 페이지의 모든 대화상자를 오버라이드하지 않는 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' });

작업 예시

"최선" 답변은 여러 대화 상자에 적합하지 않습니다.여기 더 나은 해결책이 있습니다.

open: function(event, ui) { 
    //hide close button.
    $(this).parent().children().children('.ui-dialog-titlebar-close').hide();
},

CSS를 사용하여 JavaScript 대신 닫기 버튼을 숨길 수 있습니다.

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

모든 모달에 영향을 주지 않으려면 다음과 같은 규칙을 사용할 수 있습니다.

.hide-close-btn .ui-dialog-titlebar-close{
    display: none;
}

그리고 신청하다.hide-close-btn대화상자의 맨 위 노드에

공식 페이지에 나와 있는 바와 같이 David의 제안:

스타일을 만듭니다.

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

그런 다음 닫기 단추를 숨기기 위해 대화 상자에 닫기 클래스를 추가할 수 있습니다.

$( "#dialog" ).dialog({
    dialogClass: "no-close",
    buttons: [{
        text: "OK",
        click: function() {
            $( this ).dialog( "close" );
        }
    }]
});

이게 더 나은 것 같아.

open: function(event, ui) {
  $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close').hide();
}

전화하신 후에.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

대체 방법:

대화 상자 이벤트 핸들러 내부,this는, 「대화」되는 요소를 참조하고 있습니다.$(this).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>

데모(여기서)

Robert McLean의 대답은 나에게 효과가 없었다.

단, 이 방법은 유효합니다.

$("#div").dialog({
   open: function() { $(".ui-dialog-titlebar-close").hide(); }
});

$("#div2").dialog({
   closeOnEscape: false,
   open: function(event, ui) { $('#div2').parent().find('a.ui-dialog-titlebar-close').hide();}
});

위 중 어느 것도 작동하지 않습니다.실제로 효과가 있는 솔루션은 다음과 같습니다.

$(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
})

잘 되는지 확인해 주세요.

버튼을 숨기는 가장 좋은 방법은 data-icon 속성으로 버튼을 필터링하는 것입니다.

$('#dialog-id [data-icon="delete"]').hide();

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

클래스를 비활성화하는 경우 단축 코드는 다음과 같습니다.

$(".ui-dialog-titlebar-close").hide();

사용할 수 있습니다.

대화상자 위젯에 의해 추가된 닫기 버튼에는 'ui-dialog-titlebar-close' 클래스가 있으므로 .dialog()에 대한 초기 호출 후 다음과 같은 문을 사용하여 닫기 버튼을 다시 제거할 수 있습니다.효과가 있습니다.

$( 'a.ui-dialog-titlebar-close' ).remove();

나는 대화 상자의 아슬아슬한 사건을 포착했다.이 코드에 의해, 다음의 파일이 삭제됩니다.<div>(#dhx_combo_list):

open: function(event, ui) { 
  //hide close button.
  $(this).parent().children().children('.ui-dialog-titlebar-close').click(function(){
    $("#dhx_combo_list").remove();
  });
},

$(".ui-button-icon-only").hide();

헤더 행을 삭제할 수도 있습니다.

<div data-role="header">...</div>

그러면 닫기 버튼이 제거됩니다.

용이한 실현 방법: (고객님의 고객님의Javascript)

$("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
    },
    ....
});

document.querySelector('.ui-dialog-titlebar-close').style.display = 'none'

앱의 여러 곳에서 이 작업을 하고 있다는 것을 알았기 때문에 플러그인으로 포장했습니다.

(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();

저는 외줄타기 팬입니다.다음과 같은 것이 도움이 됩니다.

$("#dialog").siblings(".ui-dialog-titlebar").find(".ui-dialog-titlebar-close").hide();

이 순수 CSS 라인을 사용하는 것은 어떻습니까?Id가 지정된 대화 상자에 대해 가장 깨끗한 솔루션을 찾습니다.

.ui-dialog[aria-describedby="IdValueOfDialog"] .ui-dialog-titlebar-close { display: none; }

jQuery UI 1.12용입니다.'classes' 옵션에 대해 다음 구성 설정을 추가했습니다.

        classes: {
            'ui-dialog-titlebar-close': 'hidden',
        },

전체 대화 상자의 초기화는 다음과 같습니다.

ConfirmarSiNo(titulo, texto, idPadre, fnCerrar) {
    const DATA_RETORNO = 'retval';
    $('confirmar-si-no').dialog({
        title: titulo,
        modal: true,
        classes: {
            'ui-dialog-titlebar-close': 'hidden',
        },
        appendTo: `#${idPadre}`,
        open: function fnOpen() { $(this).text(texto); },
        close: function fnClose() {
            let eligioSi = $(this).data(DATA_RETORNO) == true;
            setTimeout(function () { fnCerrar(eligioSi); }, 30);
        },
        buttons: {
            'Si, por favor': function si() { $(this).data(DATA_RETORNO, true); $(this).dialog("close"); },
            'No, gracias': function no() { $(this).data(DATA_RETORNO, false); $(this).dialog("close"); }
        }
    });
}

다음 스크립트 호출을 사용하여 표시합니다.

ConfirmarSiNo('Titulo',
              '¿Desea actualizar?',
              idModalPadre,
              (eligioSi) => {
                            if (eligioSi) {
                                this.$tarifa.val(tarifa.tarifa);
                                this.__ActualizarTarifa(tarifa);
                            }
                        });

Whithin Html 본문 대화상자가 포함된 다음 div가 있습니다.

<div class="modal" id="confirmar-si-no" title="" aria-labelledby="confirmacion-label">
    mensaje
</div>

최종 결과는 다음과 같습니다.

'ConfirmarSiNo' 함수는 Jquery UI 대화상자에서 "Confirmation" 대화상자를 구현하는 방법 게시물의 'Whome' 답변을 기반으로 합니다.

DialogExtend를 사용하는 사용자용 jQuery Extension 을할 수 .closable이 기능 및 이 적절한 확장이 제공하는 기타 많은 조정을 관리하는 옵션입니다.

를 이미 하고 있는 「」를 참조해 주세요.DialogExtend CSS , 「」, 「Dialog CSS」, 「Dialog CSS」에 의해서 .DialogExtend를 누릅니다.

아래 코드를 사용하여 닫기 버튼을 제거할 수 있습니다.도움이 될 만한 다른 선택지도 있습니다.

$('#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();

언급URL : https://stackoverflow.com/questions/896777/how-to-remove-close-button-on-the-jquery-ui-dialog