如何删除jQuery UI对话框上的关闭按钮？

22 回答

• 688

  我发现这最终有效（注意第三行覆盖open函数，找到按钮并隐藏它）：

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

  要隐藏所有对话框上的关闭按钮，您也可以使用以下CSS：

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

  回复于 2024-04-28T22:47:30+08:00
• 3

  这是另一个使用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>
  

  Javascript .

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

  Working Example

  回复于 2024-04-28T22:47:30+08:00
• 5

  “最佳”答案不适合多个对话框 . 这是一个更好的解决方案 .

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

  回复于 2024-04-28T22:47:30+08:00
• 0

  您可以使用CSS隐藏关闭按钮而不是JavaScript：

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

  回复于 2024-04-28T22:47:30+08:00
• 6

  正如官方page所示，David建议：

  创建一个样式：

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

  然后，您可以简单地将no-close类添加到任何对话框，以隐藏它的关闭按钮：

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

  回复于 2024-04-28T22:47:30+08:00
• 83

  我认为这更好 .

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

  回复于 2024-04-28T22:47:30+08:00
• 9

  在元素上调用 .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 指的是"dialogged"元素，而 $(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>
  

  Demos here

  回复于 2024-04-28T22:47:30+08:00
• 2

  Robert MacLean的回答对我不起作用 .

  然而，这对我有用：

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

  回复于 2024-04-28T22:47:30+08:00
• 122

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

  回复于 2024-04-28T22:47:30+08:00
• 25

  以上都不是 . 真正有效的解决方案是：

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

  请检查它是否适合您 .

  回复于 2024-04-28T22:47:30+08:00
• -1

  隐藏按钮的最佳方法是使用它的data-icon属性对其进行过滤：

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

  回复于 2024-04-28T22:47:30+08:00
• 0

  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
  

  回复于 2024-04-28T22:47:30+08:00
• 41

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

  yaaaay！它真的有用！我 grab 了对话框的关闭事件 . 在上面的代码中，它删除了div（#dhx_combo_list） .

  太好了，谢谢大家！

  回复于 2024-04-28T22:47:30+08:00
• 7

  对于停用类，短代码：

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

  可能用过了 .

  回复于 2024-04-28T22:47:30+08:00
• 6

  Dialog小部件添加的关闭按钮具有类'ui-dialog-titlebar-close'，因此在初始调用.dialog（）之后，您可以使用这样的语句再次删除关闭按钮：它有效..

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

  回复于 2024-04-28T22:47:30+08:00
• 1

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

  回复于 2024-04-28T22:47:30+08:00
• 9

  您还可以删除 Headers 行：

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

  删除关闭按钮 .

  回复于 2024-04-28T22:47:30+08:00
• 6

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

  回复于 2024-04-28T22:47:30+08:00
• 345

  简单的实现方法:(在 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
      },
      ....
  });
  

  回复于 2024-04-28T22:47:30+08:00
• 33

  因为我发现我在我的应用程序中的几个地方都这样做，所以我将它包装在一个插件中：

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

  回复于 2024-04-28T22:47:30+08:00
• 46

  我是单行的粉丝（他们工作的地方！） . 这对我有用：

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

  回复于 2024-04-28T22:47:30+08:00
• 6

  您可以使用以下代码删除关闭按钮 . 还有其他选项，你可能会有用 .

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

  回复于 2024-04-28T22:47:30+08:00