Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge pull request #5142 from MauriceG/patch-11

Docs: Adding data-dismissable info to popup- and attribute reference
  • Loading branch information...
commit 34a32eebb80bf3837996bc10afef8f5e81c165e0 1 parent 69aec06
@agcolom agcolom authored
Showing with 13 additions and 2 deletions.
  1. +5 −0 docs/api/data-attributes.html
  2. +8 −2 docs/pages/popup/index.html
View
5 docs/api/data-attributes.html
@@ -496,6 +496,11 @@
<td><strong>true</strong> | false</td>
</tr>
<tr>
+ <th>data-dismissable</th>
+ <td><strong>true</strong> | false - If set to false prevents popup closing by clicking outside of the popup or pressing the Escape key</td>
+ </tr>
+
+ <tr>
<th>data-overlay-theme</th>
<td>swatch letter (a-z) - Default "null" (transparent background)</td>
</tr>
View
10 docs/pages/popup/index.html
@@ -167,14 +167,14 @@ <h3 class="ui-title">Are you sure you want to delete this page?</h3>
<h2>Opening popups</h2>
- <p>Using the markup-based configuration, when a link with the <code>data-rel="popup"</code> is tapped, the corresponding popup container with the id referenced in the <code>href</code> of the link will be shown. To open a popup programmatically, call popup with the <code>open</code> method on the popup container:</p>
+ <p>Using the markup-based configuration, when a link with the <code>data-rel="popup"</code> is tapped, the corresponding popup container with the <code>id</code> referenced in the <code>href</code> of the link will be shown. To open a popup programmatically, call popup with the <code>open</code> method on the popup container:</p>
<pre><code>
$( "#myPopupDiv" ).popup( "open" )
</code></pre>
<h2>Closing popups</h2>
- <p>Popups can be closed either by clicking outside the popup widget or by pressing the <code>Esc</code> key. Popups can also be closed via the <code>close</code> method:</p>
+ <p>By default popups can be closed either by clicking outside the popup widget or by pressing the <code>Esc</code> key. To prevent this, the <code>data-dismissable="false"</code> attribute can be added to the popup. Popups can also be closed via the <code>close</code> method:</p>
<pre><code>
$( "#myPopupDiv" ).popup( "close" )
@@ -192,6 +192,7 @@ <h3 class="ui-title">Are you sure you want to delete this page?</h3>
<a href="#popupCloseRight" data-rel="popup" data-role="button" data-inline="true">Popup with close button right</a>
<a href="#popupCloseLeft" data-rel="popup" data-role="button" data-inline="true">Popup with close button left</a>
+ <a href="#popupUndismissable" data-rel="popup" data-role="button" data-inline="true">Undismissable Popup</a>
<div data-role="popup" id="popupCloseRight" class="ui-content" style="max-width:280px">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
@@ -203,6 +204,11 @@ <h3 class="ui-title">Are you sure you want to delete this page?</h3>
<p>I have a close button at the top left corner with simple HTML markup.</p>
</div>
+ <div data-role="popup" id="popupUndismissable" class="ui-content" style="max-width:280px" data-dismissable="false">
+ <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</a>
+ <p>I have the <code>data-dismissable</code> attribute set to <code>false</code>. I'm not closeable be clicking outside of me.</p>
+ </div>
+
<h2>Adding padding</h2>
<p>For popups with formatted text, padding is needed. We recommend adding the <code>ui-content</code> class to the popup container which adds the standard 15px of padding, just like the page content container. Write your own styles to create a more customized design if needed.</p>
Please sign in to comment.
Something went wrong with that request. Please try again.