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

【问题标题】：In jQuery Mobile how to remove the close icon in popup dialog在 jQuery Mobile 中如何删除弹出对话框中的关闭图标
【发布时间】：2012-12-11 19:51:42
【问题描述】：

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

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

【问题讨论】：

标签： jquery css jquery-mobile

【解决方案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>

【讨论】：

我的评论不知何故消失了，所以我再重复一遍：很好的答案！ 以前的 2 个 Raja Ovis 现在合并为一个 Karthi Keyan，这没关系我，我不必明白……

【解决方案2】：

HTML 如下。

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

你所要做的就是

$(".ui-btn[title='close']").remove();

或

$(".ui-btn[title='close']").hide();

或

$(".ui-btn[title='close']").css('display', 'none');

或

$(".ui-btn[title='close']").attr("hidden", "hidden");

【讨论】：

【解决方案3】：

在您的对话框加载后调用以下命令：

$(".ui-dialog a[data-icon='delete']").remove();

【讨论】：

【解决方案4】：

只是不要在页面上包含 <h1> 标头，或带有 data-role="header" 的 div

【讨论】：

OP 可能仍然需要标题，而不是关闭按钮

【解决方案5】：

HTML 代码：

 <div data-role="dialog" id="pageId">
    <div data-role="header" data-theme="c" class="ui-header">
      <h2>your Heading</h2>
    </div>
    <div data-role="content">
        <p>Your Message.</p>
     </div>
 </div>

CSS 代码：

   #pageId div .ui-header a { display:none;}

【讨论】：

【解决方案6】：

HTML 代码：

 <div data-role="dialog" id="pageId">
    <div data-role="header" data-theme="c" class="ui-header">
      <h2>your Heading</h2>
    </div>
    <div data-role="content">
        <p>Your Message.</p>
     </div>
 </div>

CSS 代码：

   #pageId div .ui-header a { display:none;}

【讨论】：

【解决方案7】：

根据您的评论，我认为您想要这样的东西：

var dialog = ...
$("a[data-icon='delete']", dialog).css("display", "none"); // Hide it
// or
$("a[data-icon='delete']", dialog).remove(); // Remove it

remove()-ing 可能会导致希望图标位于 DOM 中的那个位置的模块出现问题。所以我建议隐藏变体。

如果我猜错了，并且您想从所有对话框中删除所有 X，请使用 Curt 的选择器，尽管我仍然建议只隐藏它们。（不痛不痒）

（抱歉，Curt，我知道这与您的答案很接近，但对于明智的评论来说太长了。）

【讨论】：

【解决方案8】：

如果您不需要关闭按钮，请使用弹出对话框 http://jquerymobile.com/test/docs/pages/popup/index.html#&ui-state=dialog

【讨论】：

示例中没有图标，努力尝试