3

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

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

4

8 回答 8

8

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

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

请注意，这将隐藏所有.ui-btnin ui-header。如果不需要，您可以编写一个简单的脚本来确保我们只是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>
于 2012-11-05T22:01:01.667 回答
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");
于 2012-11-11T21:32:32.777 回答
1

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

$(".ui-dialog a[data-icon='delete']").remove();
于 2012-10-26T11:18:35.643 回答
1

只是不要<h1>在页面上包含标题或 divdata-role="header"

于 2012-10-26T14:14:13.777 回答
1

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>

代码：

   #pageId div .ui-header a { display:none;}
于 2012-11-05T06:57:45.420 回答
1

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>

代码：

   #pageId div .ui-header a { display:none;}
于 2012-12-11T11:51:42.030 回答
0

从您的评论中，我认为您想要这样的东西：

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，我知道这与您的答案很接近，但是对于明智的评论来说太长了。）

于 2012-10-29T07:55:33.100 回答
0

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

于 2012-10-29T08:00:27.443 回答