Question

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

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

Answer 1

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

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

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

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

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

对于标识为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>

Answer 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");

Answer 3

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

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

Answer 4

请勿在页面上添加<h1>标题，或在data-role="header"

包含div

Answer 5

HTML CODE：

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

Answer 6

HTML CODE：

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

Answer 7

根据你的评论，我认为你想要这样的事情：

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

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

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

（对不起Curt，我知道这很接近你的回答，但是对于一个明智的评论来说太长了。）

Answer 8

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

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

8 个答案: