jquery - 在 jQuery Mobile 中如何删除弹出对话框中的关闭图标

Question

有谁知道如何去掉弹出对话框中的关闭图标。

http://jquerymobile.com/test/docs/pages/dialog/index.html#&ui-state=dialog

Answer 1

查看对话框的结构后，很容易理解下面的 CSS 可用于隐藏 Close 按钮。

.ui-header > .ui-btn { display: none; }

请注意，这将隐藏 ui-header 中的所有 .ui-btn。如果不需要，您可以编写一个简单的脚本来确保我们只是单独隐藏 Close 按钮。

对于页面中的所有对话框:

$(function () {
    $('.ui-btn', '.ui-header').filter (function () {
        return $.trim($(this).find('span.ui-btn-text').text()) == 'Close'; 
    }).hide();
});

对于 ID 为 pageId 的任何特定对话框:

$(function () {
    $('.ui-header .ui-btn', '#pageId').filter (function () {
        return $.trim($(this).find('span.ui-btn-text').text()) == 'Close'; 
    }).hide();
});

有关对话框结构的更多详细信息，请参见下文。

下面是 X(关闭图标)，如 div 开头，(查看完整结构)

<a href="#" class="ui-btn-left ui-btn ui-btn-up-d ui-shadow ui-btn-corner-all ui-btn-icon-notext" title="Close">
  <span class="ui-btn-inner ui-btn-corner-all">
     <span class="ui-btn-text">Close</span>
     <span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span>
   </span>
 </a>

完整结构 [清理数据属性以提高可读性]

<div role="dialog" class="ui-dialog-contain ui-corner-all ui-overlay-shadow">
  <div class="ui-corner-top ui-header ui-bar-d" role="banner">
    <a href="#" class="ui-btn-left ui-btn ui-btn-up-d ui-shadow ui-btn-corner-all ui-btn-icon-notext" title="Close">
        <span class="ui-btn-inner ui-btn-corner-all">
          <span class="ui-btn-text">Close</span>
          <span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span>
        </span>
     </a>
     <h1 class="ui-title" role="heading" aria-level="1">Dialog</h1>
  </div>
  <div class="ui-corner-bottom ui-content ui-body-c" role="main">
    Dialog content
    <a href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-b">
      <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">Sounds good</span>
      </span>
    </a>       
    <a href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c">
       <span class="ui-btn-inner ui-btn-corner-all">
         <span class="ui-btn-text">Cancel</span>
       </span>
     </a>    
  </div>
</div>