Làm cách nào để loại bỏ nút đóng trên hộp thoại UI UI?

Làm cách nào để loại bỏ nút đóng ( X ở góc trên bên phải) trên hộp thoại được tạo bởi jQuery UI?

Tôi đã tìm thấy cái này hoạt động cuối cùng (lưu ý dòng thứ ba ghi đè chức năng mở tìm nút và ẩn nó):

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

Để ẩn nút đóng trên tất cả các hộp thoại, bạn cũng có thể sử dụng CSS sau:

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

Đây là một tùy chọn khác chỉ sử dụng CSS mà không vượt quá mọi hộp thoại trên trang.

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>

Javascript.

$( ".selector" ).dialog({ dialogClass: 'no-close' });

Ví dụ làm việc

câu trả lời "tốt nhất" sẽ không tốt cho nhiều hộp thoại. đây là một giải pháp tốt hơn

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

Bạn có thể sử dụng CSS để ẩn nút đóng thay vì JavaScript:

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

Nếu bạn không muốn ảnh hưởng đến tất cả các phương thức, bạn có thể sử dụng quy tắc như

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

Và áp dụng .hide-close-btncho nút trên cùng của hộp thoại

Như được hiển thị trên trang chính thức và được đề xuất bởi David:

Tạo một phong cách:

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

Sau đó, bạn có thể chỉ cần thêm lớp không đóng vào bất kỳ hộp thoại nào để ẩn nút đóng:

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

Tôi nghĩ rằng điều này là tốt hơn.

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

Khi bạn đã gọi .dialog()một phần tử, bạn có thể xác định vị trí nút đóng (và đánh dấu hộp thoại khác) bất cứ lúc nào thuận tiện mà không cần sử dụng trình xử lý sự kiện:

$("#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

Phương pháp luân phiên:

Bên trong trình xử lý sự kiện hộp thoại, thisđề cập đến phần tử được " $(this).parent()hộp thoại " và tham chiếu đến hộp chứa đánh dấu hộp thoại, vì vậy:

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

FYI, hộp thoại đánh dấu trông như thế này:

<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>

Trình diễn ở đây

Câu trả lời của Robert MacLean không hiệu quả với tôi.

Điều này tuy nhiên làm việc cho tôi:

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

Không có công trình nào ở trên. Giải pháp thực sự hiệu quả là:

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

Vui lòng kiểm tra nếu nó làm việc cho bạn.

Cách tốt nhất để ẩn nút là lọc nó với thuộc tính biểu tượng dữ liệu:

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

Đối với việc hủy kích hoạt lớp, mã ngắn:

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

có thể được sử dụng.

Nút đóng được thêm bởi tiện ích Hộp thoại có lớp 'ui-hộp thoại-titlebar-close', vì vậy, sau cuộc gọi ban đầu của bạn đến .dialog (), bạn có thể sử dụng một câu lệnh như thế này để loại bỏ nút đóng lại: Nó hoạt động ..

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

Tôi bắt sự kiện đóng của hộp thoại. Mã này sau đó loại bỏ <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();

Bạn cũng có thể xóa dòng tiêu đề của mình:

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

trong đó loại bỏ nút đóng.

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

Cách dễ dàng để đạt được: (Làm điều này trong của bạn 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
    },
    ....
});

Vì tôi thấy tôi đang làm điều này ở một số nơi trong ứng dụng của mình, tôi đã gói nó trong một plugin:

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

Ví dụ sử dụng:

$("#dialog").dialog({ /* lots of options */ }).dialogNoClose();

Tôi là một fan hâm mộ của một lớp lót (nơi họ làm việc!). Đây là những gì làm việc cho tôi:

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

Làm thế nào về việc sử dụng dòng CSS thuần túy này? Tôi thấy đây là giải pháp sạch nhất cho hộp thoại có Id đã cho:

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

Bạn có thể loại bỏ nút đóng với mã bên dưới. Có những lựa chọn khác mà bạn có thể chiến đấu hữu ích.

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