This is my first time using the jQUery Mobile popups. I've found documentation here and here. How I'm looking to create the following:

Now according to the doc's, the following code should work:

<a href="#popupBasic" data-rel="popup">Open Popup</a>

<div data-role="popup" id="popupBasic" data-dismissible="false">
    <p>This is a pletely basic popup, no options set.<p>
</div>

But given the code above I still keep getting the stock standard popup:

Any idea what I am doing wrong?

This is my first time using the jQUery Mobile popups. I've found documentation here and here. How I'm looking to create the following:

Now according to the doc's, the following code should work:

<a href="#popupBasic" data-rel="popup">Open Popup</a>

<div data-role="popup" id="popupBasic" data-dismissible="false">
    <p>This is a pletely basic popup, no options set.<p>
</div>

But given the code above I still keep getting the stock standard popup:

Any idea what I am doing wrong?

• javascript
• jquery
• jquery-mobile
• popup

1 Answer 1

data-dismissible means whether you want the popup to close once clicked outside it. The default value is true, if you set it to false, you have to add a button with data-rel="back" to close it, jQM wont add a close button dynamically/automatically.

Change your markup to the following.

<div data-role="popup" id="popupBasic" data-dismissible="false" data-theme="c" data-overlay-theme="a">
  <p>Click button to close this.</p>
  <a href="#" data-rel="back" data-role="button">Close</a>
</div>

Note that data-theme and data-overlay-theme are different, the latter changes the color of the popup's overlay.

Or, you can close it programmatically.

$("#popupBasic").popup("close");

Demo