Docs: Add popups dismissable attribute info and demo (popup/index.html)

Author: MauriceG

docs/pages/popup/index.html

@@ -167,14 +167,14 @@ <h2>Calling the popup plugin</h2>
 
 		<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 @@ <h2>Closing popups</h2>
 
 		<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="#popupUnismissable" 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 @@ <h2>Closing popups</h2>
 			<p>I have a close button at the top left corner with simple HTML markup.</p>
 		</div>
 
+		<div data-role="popup" id="popupUnismissable" 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>