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

css, jquery, jquery-mobile

Solution

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>

Problem

Original source