CODEWITHSUNDEEP
jquerycssjquery-mobile
Raja O
Raja O

Reputation: 644

In jQuery Mobile how to remove the close icon in popup dialog

Does anyone know how to remove the close icon in the popup dialog.

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

Upvotes: 3

Views: 3577

Answers (8)

user1825699
user1825699

Reputation:

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

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

Upvotes: 1

OneChillDude
OneChillDude

Reputation: 8006

The HTML is as follows.

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

And all you have to do is

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

or

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

or

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

or

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

Upvotes: 2

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

After looking at the structure of the dialog it is easy to understand that the below CSS can be used to hide the Close button.

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

Note this will hide all the .ui-btn in ui-header. If that is not desired, you can write a simple script to make sure that we are just hiding the Close button alone.

For all dialogs in the page:

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

For any specific dialog with ID pageId:

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

See below for more details about the dialog structure.

Below is the the X (close icon) as in the beginning of the div, (See complete structure)

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

Complete Structure [cleaned up data attributes for readability]

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

Upvotes: 8

Raja O
Raja O

Reputation: 644

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

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

Upvotes: 1

Roman
Roman

Reputation: 504

Use popup dialog if you don't need close button http://jquerymobile.com/test/docs/pages/popup/index.html#&ui-state=dialog

Upvotes: 0

dualed
dualed

Reputation: 10502

From your comment I think you want something like this:

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

remove()-ing might cause trouble with modules that expect the icon to be in that spot in the DOM. So I suggest the hiding variant.

If I guessed wrong and you want to remove all Xs from all dialogs, use Curt's selector, though I still suggest only hiding them. (It doesn't really hurt)

(Sorry Curt, I know it's close to your answer, but it was too long for a sensible comment.)

Upvotes: 0

adamdehaven
adamdehaven

Reputation: 5920

Just don't include an <h1> header on the page, or a div with data-role="header"

Upvotes: 1

Curtis
Curtis

Reputation: 103348

Call the following after your dialog has loaded:

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

Upvotes: 1

Related Questions