ポップアップダイアログの閉じるアイコンを削除する方法を知っている人はいますか?
http://jquerymobile.com/test/docs/pages/dialog/index.html#&ui-state=dialog
ポップアップダイアログの閉じるアイコンを削除する方法を知っている人はいますか?
http://jquerymobile.com/test/docs/pages/dialog/index.html#&ui-state=dialog
Close
ダイアログの構造を見ると、以下の CSS を使用してボタンを非表示にできることが容易に理解できます。
.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();
});
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"> </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"> </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>
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"> </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");
ダイアログがロードされたら、以下を呼び出します。
$(".ui-dialog a[data-icon='delete']").remove();
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;}
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;}
<h1>
ページにヘッダーを含めないでください。data-role="header"
あなたのコメントから、私はあなたがこのようなものが欲しいと思います:
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 のセレクターを使用してください。(特に痛くないです)
(申し訳ありませんが、カート、あなたの答えに近いことは知っていますが、賢明なコメントには長すぎました。)
閉じるボタンが必要ない場合は、ポップアップ ダイアログを使用してください http://jquerymobile.com/test/docs/pages/popup/index.html#&ui-state=dialog