I have an anchor linking to a dialog box, html of the dialog box here:

1. <div data-role="page" id="myDialog" data-close-btn="none" >
2.   <div data-role="header">
3.     <h1>Terms and Conditions</h1>
4.   </div>
5.     <div data-role="content">
6.       <p>Lorem ipsum dolor allut et alos en</p>
7.     </div>
8. </div>

But this is not removing the x in the top left of the dialog box. The link to open the box is here: Dialog box opens fine but I cannot remove the actual x with the element.

1. <a class="ui-btn ui-btn-inline ui-btn-corner-all ui-btn-inner ui-overlay-shadow ui-shadow" href="#myDialog" data-rel="dialog">Open dialog</a>

I don't want to resort using a "display: none;" as I'm obviously just missing something obvious - anyone got any ideas?

Cheers,

Garry.