{"id":102,"date":"2023-08-25T17:32:43","date_gmt":"2023-08-25T17:32:43","guid":{"rendered":"\/\/api.jquerymobile.com\/1.3\/?p=102"},"modified":"2023-08-25T17:32:43","modified_gmt":"2023-08-25T17:32:43","slug":"popup","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.3\/popup\/","title":{"rendered":"Popup Widget"},"content":{"rendered":"<article id=\"popup1\" class=\"entry widget\"><h2 class=\"section-title\">\n<span>Popup Widget<\/span><span class=\"version-details\">version added: 1.2<\/span>\n<\/h2>\n<div class=\"entry-wrapper\">\n<p class=\"desc\"><strong>Description: <\/strong>Opens content in a Popup.<\/p>\n<section id=\"quick-nav\"><header><h2>QuickNav<a href=\"#entry-examples\">Examples<\/a>\n<\/h2><\/header><div class=\"quick-nav-section\">\n<h3>Options<\/h3>\n<div><a href=\"#option-corners\">corners<\/a><\/div>\n<div><a href=\"#option-dismissible\">dismissible<\/a><\/div>\n<div><a href=\"#option-history\">history<\/a><\/div>\n<div><a href=\"#option-initSelector\">initSelector<\/a><\/div>\n<div><a href=\"#option-overlayTheme\">overlayTheme<\/a><\/div>\n<div><a href=\"#option-positionTo\">positionTo<\/a><\/div>\n<div><a href=\"#option-shadow\">shadow<\/a><\/div>\n<div><a href=\"#option-theme\">theme<\/a><\/div>\n<div><a href=\"#option-tolerance\">tolerance<\/a><\/div>\n<div><a href=\"#option-transition\">transition<\/a><\/div>\n<\/div>\n<div class=\"quick-nav-section\">\n<h3>Methods<\/h3>\n<div><a href=\"#method-close\">close<\/a><\/div>\n<div><a href=\"#method-open\">open<\/a><\/div>\n<div><a href=\"#method-reposition\">reposition<\/a><\/div>\n<\/div>\n<div class=\"quick-nav-section\">\n<h3>Events<\/h3>\n<div><a href=\"#event-afterclose\">afterclose<\/a><\/div>\n<div><a href=\"#event-afteropen\">afteropen<\/a><\/div>\n<div><a href=\"#event-beforeposition\">beforeposition<\/a><\/div>\n<div><a href=\"#event-create\">create<\/a><\/div>\n<\/div><\/section><div class=\"longdesc\" id=\"entry-longdesc\">\n\t\t<p>To create a popup, add the <code>data-role=&quot;popup&quot;<\/code> attribute to a div with the popup contents. Then create a link with the <code>href<\/code> set to the <code>id<\/code> of the popup div, and add the attribute <code>data-rel=&quot;popup&quot;<\/code> to tell the framework to open the popup when the link is tapped. This is a similar markup pattern to the <a href=\"..\/dialog\/\">dialog<\/a> widget. A popup div has to be nested inside the same page as the link.<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;#popupBasic&quot;<\/span> <span class=\"hljs-attr\">data-rel<\/span>=<span class=\"hljs-string\">&quot;popup&quot;<\/span>&gt;<\/span>Open Popup<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;popup&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;popupBasic&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>This is a completely basic popup, no options set.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<p>This will result in the following popup:\n\t\t<iframe src=\"\/1.3\/resources\/popup\/example1.html\" style=\"width:100%;height:90px;border:0px\"><\/iframe><\/p>\n\n\t\t<p>The popup consists of two elements: the screen, which is a transparent or translucent element that covers the entire document, and the container, which is the popup itself. If your original element had an <code>id<\/code> attribute, the screen and the container will each receive an <code>id<\/code> attribute based on it. The screen&apos;s <code>id<\/code> will be suffixed with &quot;-screen&quot;, and the container&apos;s <code>id<\/code> will be suffixed with &quot;-popup&quot; (in the above example, <code>id=&quot;popupBasic-screen&quot;<\/code> and <code>id=&quot;popupBasic-popup&quot;<\/code>, respectively).<\/p>\n\n\t\t<p>The framework adds a small amount of margin to text elements, but it&apos;s really just a container with <strong>rounded corners<\/strong> and a <strong>shadow<\/strong> which serves as a blank slate for your designs (even these features can be disabled via options).<\/p>\n\n\t\t<p>This simple styling makes it easy to add in widgets to create a variety of different interactions. Here are a few real-world examples that combine the various settings and styles you can achieve out of the box with popups:\n\t\t<iframe src=\"\/1.3\/resources\/popup\/example2.html\" style=\"width:100%;height:590px;border:0px\"><\/iframe>\n\t\t<\/p>\n\n\t\t<h2>Scaling images: Lightbox examples<\/h2>\n\n\t\t<p>The framework CSS contains rules that make images that are immediate children of the popup scale to fit the screen. Because of the absolute positioning of the popup container and screen, the height is not adjusted to screen height on all browsers. You can prevent vertical scrolling with a simple script that sets the <code>max-height<\/code> of the image.<\/p>\n\n\t\t<p>In the two examples below the divs with <code>data-role=&quot;popup&quot;<\/code> have a class of <code>photopopup<\/code>.\n\t\t<iframe src=\"\/1.3\/resources\/popup\/example3.html\" style=\"width:100%;height:590px;border:0px\"><\/iframe>\n\t\t<\/p>\n\n\t\t<p>The handler is bound to the <code>popupbeforeposition<\/code> event, which ensures the image is not only scaled before it is shown but also when the window is resized (e.g. orientation change). In this code example the height is reduced by 60 to take a top and bottom tolerance of 30 pixels into account.<\/p>\n\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-built_in\">document<\/span> ).on( <span class=\"hljs-string\">&quot;pageinit&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">&quot;.photopopup&quot;<\/span> ).on({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-attr\">popupbeforeposition<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            <span class=\"hljs-keyword\">var<\/span> maxHeight = $( <span class=\"hljs-built_in\">window<\/span> ).height() - <span class=\"hljs-number\">60<\/span> + <span class=\"hljs-string\">&quot;px&quot;<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            $( <span class=\"hljs-string\">&quot;.photopopup img&quot;<\/span> ).css( <span class=\"hljs-string\">&quot;max-height&quot;<\/span>, maxHeight );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<h2>Working with iframes in popups<\/h2>\n\n\t\t<p>You may need to embed an iframe into a popup to use a 3rd party widget. Here, we&apos;ll walk through a few real-world examples of working with iframes: videos and maps.<\/p>\n\n\t\t<h3>Video example<\/h3>\n\n\t\t<p>Here is an example of a 3rd party video player embedded in a popup:\n\t\t<iframe src=\"\/1.3\/resources\/popup\/example4.html\" style=\"width:100%;height:390px;border:0px\"><\/iframe><\/p>\n\n\t\t<p>The markup is an iframe inside a popup container. The popup will have a 15 pixels padding because of class <code>ui-content<\/code> and a one pixel border because the framework will add class <code>ui-body-d<\/code> to the popup.<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;popup&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;popupVideo&quot;<\/span> <span class=\"hljs-attr\">data-overlay-theme<\/span>=<span class=\"hljs-string\">&quot;a&quot;<\/span> <span class=\"hljs-attr\">data-theme<\/span>=<span class=\"hljs-string\">&quot;d&quot;<\/span> <span class=\"hljs-attr\">data-tolerance<\/span>=<span class=\"hljs-string\">&quot;15,15&quot;<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;ui-content&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">iframe<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">&quot;http:\/\/player.vimeo.com\/video\/41135183&quot;<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">&quot;497&quot;<\/span> <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">&quot;298&quot;<\/span> <span class=\"hljs-attr\">seamless<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">iframe<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<p>When using an iframe inside a popup it is important to initially <strong>set the width and height attributes to 0<\/strong>. This prevents the page to breaking on platforms like Android 2.3. Note that you have to set the attributes, because setting the width and height with CSS is not sufficient. You can leave the actual width and height in the markup for browsers that have JavaScript disabled and use <code>attr()<\/code> to set the zero values upon the <code>pageinit<\/code> event.<\/p>\n\n\t\t\t<p>Next, bind to the <code>popupbeforeposition<\/code> event to set the desired size of the iframe when the popup is shown or when the window is resized (e.g. orientation change). For the iframe examples on this page a custom function <code>scale()<\/code> is used to scale down the iframe to fit smaller screens. Expand the section below to view the code of this function.<\/p>\n\n\t\t<div data-role=\"collapsible\" data-content-theme=\"d\">\n\t\t\t<h3><code>scale()<\/code><\/h3>\n\t\t\t<p>The window width and height are decreased by 30 to take the tolerance of 15 pixels at each side into account.<\/p>\n\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">scale<\/span>(<span class=\"hljs-params\"> width, height, padding, border <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-keyword\">var<\/span> scrWidth = $( <span class=\"hljs-built_in\">window<\/span> ).width() - <span class=\"hljs-number\">30<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        scrHeight = $( <span class=\"hljs-built_in\">window<\/span> ).height() - <span class=\"hljs-number\">30<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        ifrPadding = <span class=\"hljs-number\">2<\/span> * padding,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        ifrBorder = <span class=\"hljs-number\">2<\/span> * border,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        ifrWidth = width + ifrPadding + ifrBorder,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        ifrHeight = height + ifrPadding + ifrBorder,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        h, w;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-keyword\">if<\/span> ( ifrWidth &lt; scrWidth &amp;&amp; ifrHeight &lt; scrHeight ) {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        w = ifrWidth;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        h = ifrHeight;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    } <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> ( ( ifrWidth \/ scrWidth ) &gt; ( ifrHeight \/ scrHeight ) ) {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        w = scrWidth;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        h = ( scrWidth \/ ifrWidth ) * ifrHeight;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    } <span class=\"hljs-keyword\">else<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        h = scrHeight;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        w = ( scrHeight \/ ifrHeight ) * ifrWidth;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-keyword\">return<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-string\">&apos;width&apos;<\/span>: w - ( ifrPadding + ifrBorder ),<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-string\">&apos;height&apos;<\/span>: h - ( ifrPadding + ifrBorder )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    };<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>};<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t\t\t<p><strong>Note:<\/strong> This function is not part of the framework. Copy the code into your script to use it.<\/p>\n\t\t<\/div>\n\n\t\t<p>When the popup is closed the width and height should be set back to 0. You can do this by binding to the <code>popupafterclose<\/code> event.<\/p>\n\n\t\t<p>This is the complete script and the link to open the video popup:<\/p>\n\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-built_in\">document<\/span> ).on( <span class=\"hljs-string\">&quot;pageinit&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">&quot;#popupVideo iframe&quot;<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        .attr( <span class=\"hljs-string\">&quot;width&quot;<\/span>, <span class=\"hljs-number\">0<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        .attr( <span class=\"hljs-string\">&quot;height&quot;<\/span>, <span class=\"hljs-number\">0<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">&quot;#popupVideo&quot;<\/span> ).on({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-attr\">popupbeforeposition<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            <span class=\"hljs-keyword\">var<\/span> size = scale( <span class=\"hljs-number\">497<\/span>, <span class=\"hljs-number\">298<\/span>, <span class=\"hljs-number\">15<\/span>, <span class=\"hljs-number\">1<\/span> ),<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>                w = size.width,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>                h = size.height;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            $( <span class=\"hljs-string\">&quot;#popupVideo iframe&quot;<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>                .attr( <span class=\"hljs-string\">&quot;width&quot;<\/span>, w )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>                .attr( <span class=\"hljs-string\">&quot;height&quot;<\/span>, h );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        },<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-attr\">popupafterclose<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            $( <span class=\"hljs-string\">&quot;#popupVideo iframe&quot;<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>                .attr( <span class=\"hljs-string\">&quot;width&quot;<\/span>, <span class=\"hljs-number\">0<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>                .attr( <span class=\"hljs-string\">&quot;height&quot;<\/span>, <span class=\"hljs-number\">0<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t\t<p>Note that the video will still be playing in the iframe when the popup is closed. If available you can use the 3rd party API to stop the video on the <code>popupafterclose<\/code> event. Another way is to create the iframe when the popup is opened and destroy it when the popup is closed, but this would drop support for browsers that have JavaScript disabled.<\/p>\n\n\t\t<h3>Map example<\/h3>\n\t\t<p>In the second example, an iframe is used to display <strong>Google Maps API<\/strong>. Using an iframe prevents issues with the controls of the map.\n\t\t<iframe src=\"\/1.3\/resources\/popup\/example5.html\" style=\"width:100%;height:390px;border:0px\"><\/iframe><\/p>\n\n\t\t<p>This is the markup of the popup including a right close button:<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;popup&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;popupMap&quot;<\/span> <span class=\"hljs-attr\">data-overlay-theme<\/span>=<span class=\"hljs-string\">&quot;a&quot;<\/span> <span class=\"hljs-attr\">data-theme<\/span>=<span class=\"hljs-string\">&quot;a&quot;<\/span> <span class=\"hljs-attr\">data-corners<\/span>=<span class=\"hljs-string\">&quot;false&quot;<\/span> <span class=\"hljs-attr\">data-tolerance<\/span>=<span class=\"hljs-string\">&quot;15,15&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;#&quot;<\/span> <span class=\"hljs-attr\">data-rel<\/span>=<span class=\"hljs-string\">&quot;back&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span> <span class=\"hljs-attr\">data-theme<\/span>=<span class=\"hljs-string\">&quot;a&quot;<\/span> <span class=\"hljs-attr\">data-icon<\/span>=<span class=\"hljs-string\">&quot;delete&quot;<\/span> <span class=\"hljs-attr\">data-iconpos<\/span>=<span class=\"hljs-string\">&quot;notext&quot;<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;ui-btn-right&quot;<\/span>&gt;<\/span>Close<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">iframe<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">&quot;map.html&quot;<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">&quot;480&quot;<\/span> <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">&quot;320&quot;<\/span> <span class=\"hljs-attr\">seamless<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">iframe<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<p>Expand the section below to view the source of the iframe.<\/p>\n\n\t\t<div data-role=\"collapsible\" data-content-theme=\"d\">\n\t\t\t<h3><code>map.html<\/code><\/h3>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n27\">27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n28\">28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n29\">29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n30\">30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n31\">31<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n32\">32<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n33\">33<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n34\">34<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n35\">35<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n36\">36<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n37\">37<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n38\">38<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">&quot;utf-8&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Map<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">initialize<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            <span class=\"hljs-keyword\">var<\/span> myLatlng = <span class=\"hljs-keyword\">new<\/span> google.maps.LatLng( <span class=\"hljs-number\">51.520838<\/span>, -<span class=\"hljs-number\">0.140261<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            <span class=\"hljs-keyword\">var<\/span> myOptions = {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>                <span class=\"hljs-attr\">zoom<\/span>: <span class=\"hljs-number\">15<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>                <span class=\"hljs-attr\">center<\/span>: myLatlng,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>                <span class=\"hljs-attr\">mapTypeId<\/span>: google.maps.MapTypeId.ROADMAP<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            <span class=\"hljs-keyword\">var<\/span> map = <span class=\"hljs-keyword\">new<\/span> google.maps.Map( <span class=\"hljs-built_in\">document<\/span>.getElementById( <span class=\"hljs-string\">&quot;map_canvas&quot;<\/span> ), myOptions );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">&quot;http:\/\/maps.google.com\/maps\/api\/js?sensor=false&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-selector-tag\">html<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            <span class=\"hljs-attribute\">overflow<\/span>: hidden;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-selector-tag\">body<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-selector-id\">#map_canvas<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span> <span class=\"hljs-attr\">onload<\/span>=<span class=\"hljs-string\">&quot;initialize()&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;map_canvas&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t\t<\/div>\n\n\t\t<p>Setting the size of the iframe is done exactly the same as for the video example, with one exception. You should also set the width and height of the div that contains the map to prevent the page to break on platforms like Android 2.3. In this example the ID of this div is <code>#map_canvas<\/code>.<\/p>\n\n\t\t<p>This is the complete script and the link to open the map popup:<\/p>\n\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n27\">27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n28\">28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n29\">29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n30\">30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n31\">31<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-built_in\">document<\/span> ).on( <span class=\"hljs-string\">&quot;pageinit&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">&quot;#popupMap iframe&quot;<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        .attr( <span class=\"hljs-string\">&quot;width&quot;<\/span>, <span class=\"hljs-number\">0<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        .attr( <span class=\"hljs-string\">&quot;height&quot;<\/span>, <span class=\"hljs-number\">0<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">&quot;#popupMap iframe&quot;<\/span> ).contents().find( <span class=\"hljs-string\">&quot;#map_canvas&quot;<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        .css( { <span class=\"hljs-string\">&quot;width&quot;<\/span> : <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-string\">&quot;height&quot;<\/span> : <span class=\"hljs-number\">0<\/span> } );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">&quot;#popupMap&quot;<\/span> ).on({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-attr\">popupbeforeposition<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            <span class=\"hljs-keyword\">var<\/span> size = scale( <span class=\"hljs-number\">480<\/span>, <span class=\"hljs-number\">320<\/span>, <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-number\">1<\/span> ),<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>                w = size.width,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>                h = size.height;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            $( <span class=\"hljs-string\">&quot;#popupMap iframe&quot;<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>                .attr( <span class=\"hljs-string\">&quot;width&quot;<\/span>, w )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>                .attr( <span class=\"hljs-string\">&quot;height&quot;<\/span>, h );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            $( <span class=\"hljs-string\">&quot;#popupMap iframe&quot;<\/span> ).contents().find( <span class=\"hljs-string\">&quot;#map_canvas&quot;<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>                .css( { <span class=\"hljs-string\">&quot;width&quot;<\/span>: w, <span class=\"hljs-string\">&quot;height&quot;<\/span> : h } );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        },<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-attr\">popupafterclose<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            $( <span class=\"hljs-string\">&quot;#popupMap iframe&quot;<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>                .attr( <span class=\"hljs-string\">&quot;width&quot;<\/span>, <span class=\"hljs-number\">0<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>                .attr( <span class=\"hljs-string\">&quot;height&quot;<\/span>, <span class=\"hljs-number\">0<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            $( <span class=\"hljs-string\">&quot;#popupMap iframe&quot;<\/span> ).contents().find( <span class=\"hljs-string\">&quot;#map_canvas&quot;<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>                .css( { <span class=\"hljs-string\">&quot;width&quot;<\/span>: <span class=\"hljs-number\">0<\/span>, <span class=\"hljs-string\">&quot;height&quot;<\/span> : <span class=\"hljs-number\">0<\/span> } );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<h2>Overlay panels<\/h2>\n\n\t\t<p>Taking customization further, here is an example of a popup that has been customized to look like a vertical panel with three mini buttons:\n\t\t<iframe src=\"\/1.3\/resources\/popup\/example6.html\" style=\"width:100%;height:390px;border:0px\"><\/iframe><\/p>\n\n\t\t<p>Here is the HTML markup for the button and panel:<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;#popupPanel&quot;<\/span> <span class=\"hljs-attr\">data-rel<\/span>=<span class=\"hljs-string\">&quot;popup&quot;<\/span> <span class=\"hljs-attr\">data-transition<\/span>=<span class=\"hljs-string\">&quot;slide&quot;<\/span> <span class=\"hljs-attr\">data-position-to<\/span>=<span class=\"hljs-string\">&quot;window&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span>&gt;<\/span>Open panel<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;popup&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;popupPanel&quot;<\/span> <span class=\"hljs-attr\">data-corners<\/span>=<span class=\"hljs-string\">&quot;false&quot;<\/span> <span class=\"hljs-attr\">data-theme<\/span>=<span class=\"hljs-string\">&quot;none&quot;<\/span> <span class=\"hljs-attr\">data-shadow<\/span>=<span class=\"hljs-string\">&quot;false&quot;<\/span> <span class=\"hljs-attr\">data-tolerance<\/span>=<span class=\"hljs-string\">&quot;0,0&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">data-theme<\/span>=<span class=\"hljs-string\">&quot;a&quot;<\/span> <span class=\"hljs-attr\">data-icon<\/span>=<span class=\"hljs-string\">&quot;back&quot;<\/span> <span class=\"hljs-attr\">data-mini<\/span>=<span class=\"hljs-string\">&quot;true&quot;<\/span>&gt;<\/span>Back<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">data-theme<\/span>=<span class=\"hljs-string\">&quot;a&quot;<\/span> <span class=\"hljs-attr\">data-icon<\/span>=<span class=\"hljs-string\">&quot;grid&quot;<\/span> <span class=\"hljs-attr\">data-mini<\/span>=<span class=\"hljs-string\">&quot;true&quot;<\/span>&gt;<\/span>Menu<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">data-theme<\/span>=<span class=\"hljs-string\">&quot;a&quot;<\/span> <span class=\"hljs-attr\">data-icon<\/span>=<span class=\"hljs-string\">&quot;search&quot;<\/span> <span class=\"hljs-attr\">data-mini<\/span>=<span class=\"hljs-string\">&quot;true&quot;<\/span>&gt;<\/span>Search<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t\t<p>To style the panel, and attach it to the right edge, the following CSS is used. Note that <code>#popupPanel-popup<\/code> is the ID of the container div generated by the framework.<\/p>\n\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>#popupPanel-popup {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    right: 0 !important;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    left: auto !important;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>}<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>#popupPanel {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    width: 200px;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    border: 1px solid #000;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    border-right: none;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    background: rgba(0,0,0,.5);<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    margin: -1px 0;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>}<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>#popupPanel .ui-btn {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    margin: 2em 15px;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>}<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<p>Because the popup container is positioned absolute, you can&apos;t make the panel full height with <code>height:100%;<\/code>. This small script sets the height of the popup to the actual screen height.<\/p>\n\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;#popupPanel&quot;<\/span> ).on({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attr\">popupbeforeposition<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-keyword\">var<\/span> h = $( <span class=\"hljs-built_in\">window<\/span> ).height();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        $( <span class=\"hljs-string\">&quot;#popupPanel&quot;<\/span> ).css( <span class=\"hljs-string\">&quot;height&quot;<\/span>, h );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<h3>Calling the popup plugin<\/h3>\n\t\t<p>This plugin will autoinitialize on any page that contains a div with the attribute <code>data-role=&quot;popup&quot;<\/code>. However, if needed you can directly call the <code>popup<\/code> plugin on any selector, just like any jQuery plugin and programmatically work with the popup options, methods, and events API:<\/p>\n\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;#myPopupDiv&quot;<\/span> ).popup();<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<h3>Opening popups<\/h3>\n\t\t<p>Using the markup-based configuration, when a link with the <code>data-rel=&quot;popup&quot;<\/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>\n\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;#myPopupDiv&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;open&quot;<\/span> )<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<h3>Closing popups<\/h3>\n\t\t<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-dismissible=&quot;false&quot;<\/code> attribute can be added to the popup. Popups can also be closed via the <code>close<\/code> method:<\/p>\n\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;#myPopupDiv&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;close&quot;<\/span> )<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<p>To add an explicit close button to a popup, add a link with the role of button into the popup container with a <code>data-rel=&quot;back&quot;<\/code> attribute which will close the popup when tapped. We have created helper classes to position buttons in the upper left (<code>ui-btn-left<\/code>) or upper right (<code>ui-btn-right<\/code>) of the popup but you may need to tweak these or add custom positioning styles depending on your design. We recommend adding standard content padding to the popup to make room for the buttons (see next section).<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;popup&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;#&quot;<\/span> <span class=\"hljs-attr\">data-rel<\/span>=<span class=\"hljs-string\">&quot;back&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span> <span class=\"hljs-attr\">data-theme<\/span>=<span class=\"hljs-string\">&quot;a&quot;<\/span> <span class=\"hljs-attr\">data-icon<\/span>=<span class=\"hljs-string\">&quot;delete&quot;<\/span> <span class=\"hljs-attr\">data-iconpos<\/span>=<span class=\"hljs-string\">&quot;notext&quot;<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;ui-btn-right&quot;<\/span>&gt;<\/span>Close<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  ...popup contents go here...<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<p><iframe src=\"\/1.3\/resources\/popup\/example7.html\" style=\"width:100%;height:390px;border:0px\"><\/iframe><\/p>\n\n\t\t<h3>Adding padding<\/h3>\n\t\t<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>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;#popupPadded&quot;<\/span> <span class=\"hljs-attr\">data-rel<\/span>=<span class=\"hljs-string\">&quot;popup&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span>&gt;<\/span>Popup with padding<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;popup&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;popupPadded&quot;<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;ui-content&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>This is a popup with the <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span>ui-content<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span> class added to the popup container.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<p>This will result in the following popup with content padding:\n\t\t<iframe src=\"\/1.3\/resources\/popup\/example8.html\" style=\"width:100%;height:190px;border:0px\"><\/iframe><\/p>\n\n\t\t<p>When padding is added, we apply a few style rules to negate the top margin for the first heading or paragraph in the popup and do the same for the last element&apos;s bottom margin. This keep the popups from having too much vertical space when the content padding and element margins combine.<\/p>\n\n\t\t<h3>Positioning options<\/h3>\n\t\t<p>By default, popups open centered vertically and horizontally over the thing you clicked (the origin) which is good for popups used as tooltips or menus. The framework also applies some basic collision detection rules to ensure that the popup will appear on-screen so the ultimate position may not always be centered over the origin.<\/p>\n\t\t<p>For situations like a dialog or lightbox where the popup should appear centered within the window instead of over the origin, add the <code>data-position-to<\/code> attribute to the <strong>link<\/strong> and specify a value of <code>window<\/code>. <\/p>\n\t\t<p>It&apos;s also possible to specify any valid selector as the value of <code>position-to<\/code> in addition to <code>origin<\/code> and <code>window<\/code>. For example, if you add <code>data-position-to=&quot;#myElement&quot;<\/code> the popup will be positioned over the element with the id <code>myElement<\/code>.\t<\/p>\n\n\t\t<p>A few examples:\n\t\t<iframe src=\"\/1.3\/resources\/popup\/example9.html\" style=\"width:100%;height:390px;border:0px\"><\/iframe><\/p>\n\n\t\t<p>The popup&apos;s placement constraints, which may cause the popup not to appear centered as desired, are as follow:<\/p>\n\t\t<ol>\n\t\t\t<li>The width of the popup will be limited using CSS <code>max-width<\/code> to the width of the window minus a tolerance of 15px on either side.<\/li>\n\t\t\t<li>A tolerance from the edges of the window (15px from each of the sides and 30px from the top and the bottom) will be observed when the popup fits inside the window. Tall popups are allowed to overflow the top and bottom edges of the window. Those parts of the popup can be viewed by manually scrolling the document. This tolerance is a <a href=\"#option-tolerance\">configurable option<\/a>.<\/li>\n\t\t\t<li>The top coordinate of the popup will never be negative. This ensures that the top of the popup will not be cut off.<\/li>\n\t\t\t<li>If centering the popup over an element would cause the overall height of the document to increase, the popup is shifted upwards at most until its top coordinate becomes 0.<\/li>\n\t\t<\/ol>\n\n\t\t<p>Also note that a popup is currently always placed at the center of the window after an orientation change or window resize event.<\/p>\n\n\t\t<p>See methods for information about setting the popup position programmatically, including the option to specify <strong>x and y coordinates<\/strong>.<\/p>\n\n\t\t<h3>Setting transitions<\/h3>\n\t\t<p>By default, popups have no transition to make them open as quickly as possible. To set the transition used for a popup, add the <code>data-transition<\/code> attribute to the link that references the popup. The reverse version of the transition will be used when closing the popup.<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;#transitionExample&quot;<\/span> <span class=\"hljs-attr\">data-transition<\/span>=<span class=\"hljs-string\">&quot;flip&quot;<\/span> <span class=\"hljs-attr\">data-rel<\/span>=<span class=\"hljs-string\">&quot;popup&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>   Flip transition<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<p>For performance reasons on mobile devices, we recommend using simpler transitions like pop, fade or none for smooth and fast popup animations, especially with larger or complex widgets within a popup. To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support (such as Android 2.x) will fallback to &quot;fade&quot; for all transition types. See the transitions page for detailed information on the transition system.\n\t\t<iframe src=\"\/1.3\/resources\/popup\/example10.html\" style=\"width:100%;height:390px;border:0px\"><\/iframe><\/p>\n\n\t\t<p>When you launch the popup from any of the buttons, the <code>data-transition<\/code> set on the button will be used. However, if you launch the popup programmatically, such as via <code>$( &quot;#transitionExample&quot; ).popup( &quot;open&quot; )<\/code>, the <code>data-transition<\/code> attribute specified in the definition of the popup will be used if present.<\/p>\n\n\t\t<h3>Theming the popup and overlay<\/h3>\n\n\t\t<p>The <code>popup<\/code> plugin provides two theme-related options: <code>data-theme<\/code> and <code>data-overlay-theme<\/code>. The <code>data-theme<\/code> option refers to the theme of the popup itself, whereas <code>data-overlay-theme<\/code> refers to the theme of the popup&apos;s background, which covers the entire window behind the popup.<\/p>\n\t\t<p><code>data-theme<\/code> will be inherited from the page, and will always have a valid value when the popup opens, unless you explicitly specify <code>data-theme=&quot;none&quot;<\/code>, in which case the popup will have a transparent background.<\/p>\n\t\t<p>The <code>data-overlay-theme<\/code> will never be set, and the popup&apos;s background, although always present when the popup is shown, will be completely transparent, unless explicitly set using for example <code>data-overlay-theme=&quot;a&quot;<\/code>. In this case, the background will fade in, partially obscuring the rest of the window, to further direct attention to the popup. Here is an example of an explicitly themed popup:<\/p>\n\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;both&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;popup&quot;<\/span> <span class=\"hljs-attr\">data-theme<\/span>=<span class=\"hljs-string\">&quot;e&quot;<\/span> <span class=\"hljs-attr\">data-overlay-theme<\/span>=<span class=\"hljs-string\">&quot;a&quot;<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;ui-content&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  ...Popup contents...<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t\t<iframe src=\"\/1.3\/resources\/popup\/example11.html\" style=\"width:100%;height:390px;border:0px\"><\/iframe>\n\n\t\t<h3>Note: Chaining of popups not allowed<\/h3>\n\t\t<div class=\"warning\">The framework does not currently support chaining of popups so it&apos;s not possible to embed a link from one popup to another popup. All links with a <code>data-rel=&quot;popup&quot;<\/code> inside a popup will not do anything at all.<\/div>\n\t\t<p>This also means that custom select menus will not work inside popups, because they are themselves implemented using popups. If you place a select menu inside a popup, it will be rendered as a native select menu, even if you specify <code>data-native-menu=&quot;false&quot;<\/code>.<\/p>\n\t\t<p>A workaround to get chained popups working is the use of a timeout for example in the <code>popupafterclose<\/code> event bound to the invoking popup. In the following example, when the first popup is closed, the second will be opened by a delayed call to the <code>open<\/code> method:<\/p>\n\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-built_in\">document<\/span> ).on( <span class=\"hljs-string\">&quot;pageinit&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">&quot;.popupParent&quot;<\/span> ).on({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-attr\">popupafterclose<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>            <span class=\"hljs-built_in\">setTimeout<\/span>(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{ $( <span class=\"hljs-string\">&quot;.popupChild&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;open&quot;<\/span> ) }, <span class=\"hljs-number\">100<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n\t<\/div>\n<section id=\"options\"><header><h2>Options<\/h2><\/header><div id=\"option-corners\" class=\"api-item first-item\">\n<h3>corners&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>true<\/code>\n<\/div>\n<div>\n\t\t\t\t<p>Sets whether to draw the popup with rounded corners.<\/p>\n\t\t\t\t<p>This option is also exposed as a data attribute: <code>data-corners=&quot;false&quot;<\/code>.<\/p>\n\t\t\t<\/div>\n<strong>Code examples:<\/strong><p>Initialize the popup with the <code>corners<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">corners<\/span>: <span class=\"hljs-literal\">false<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>corners<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> corners = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;corners&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;corners&quot;<\/span>, <span class=\"hljs-literal\">false<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-dismissible\" class=\"api-item\">\n<h3>dismissible&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>true<\/code>\n<\/div>\n<div>\n\t\t\t\t<p>Sets whether clicking outside the popup or pressing Escape while the popup is open will close the popup.<\/p>\n\t\t\t\t<p><em>Note:<\/em> When history support is turned on, pressing the browser&apos;s &quot;Back&quot; button will dismiss the popup even if this option is set to false.<\/p>\n\t\t\t\t<p>This option is also exposed as a data attribute: <code>data-dismissible=&quot;false&quot;<\/code>.<\/p>\n\t\t\t<\/div>\n<strong>Code examples:<\/strong><p>Initialize the popup with the <code>dismissible<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">dismissible<\/span>: <span class=\"hljs-literal\">false<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>dismissible<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> dismissible = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;dismissible&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;dismissible&quot;<\/span>, <span class=\"hljs-literal\">false<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-history\" class=\"api-item\">\n<h3>history&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>true<\/code>\n<\/div>\n<div>\n\t\t\t\t<p>Sets whether to alter the url when a popup is open to support the back button.<\/p>\n\t\t\t\t<p>This option is also exposed as a data attribute: <code>data-history=&quot;false&quot;<\/code>.<\/p>\n\t\t\t<\/div>\n<strong>Code examples:<\/strong><p>Initialize the popup with the <code>history<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">history<\/span>: <span class=\"hljs-literal\">false<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>history<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> history = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;history&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;history&quot;<\/span>, <span class=\"hljs-literal\">false<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-initSelector\" class=\"api-item\">\n<h3>initSelector&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#CSS%20selector%20string\">CSS selector string<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>&quot;:jqmData(role=&apos;popup&apos;)&quot;<\/code>\n<\/div>\n<div>\n\t\t\t\t<p>This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as popups. To change which elements are initialized, bind this option to the mobileinit event:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-built_in\">document<\/span> ).on( <span class=\"hljs-string\">&quot;mobileinit&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $.mobile.popup.prototype.options.initSelector = <span class=\"hljs-string\">&quot;.mypopup&quot;<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t\t\t<\/div>\n<\/div>\n<div id=\"option-overlayTheme\" class=\"api-item\">\n<h3>overlayTheme&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>null<\/code>\n<\/div>\n<div>\n\t\t\t\t<p>Sets the color scheme (swatch) for the popup background, which covers the entire window. If not explicitly set, the background will be transparent.<\/p>\n\t\t\t\t<p>This option is also exposed as a data attribute: <code>data-overlay-theme=&quot;a&quot;<\/code>.<\/p>\n\t\t\t<\/div>\n<strong>Code examples:<\/strong><p>Initialize the popup with the <code>overlayTheme<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">overlayTheme<\/span>: <span class=\"hljs-string\">&quot;a&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>overlayTheme<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> overlayTheme = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;overlayTheme&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;overlayTheme&quot;<\/span>, <span class=\"hljs-string\">&quot;a&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-positionTo\" class=\"api-item\">\n<h3>positionTo&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>&quot;origin&quot;<\/code>\n<\/div>\n<div>\n\t\t\t\t<p>Sets the element relative to which the popup will be centered. It has the following values:\n\t\t\t\t<table>\n\t\t\t\t\t\t<tr>\n<td class=\"enum-value\"><code>&quot;origin&quot;<\/code><\/td>\n<td>\n\t\t\t\t\t\t\tWhen the popup opens, center over the coordinates passed to the <code>open()<\/code> call (see details on this <a href=\"#method-open\">method<\/a>).\n\t\t\t\t\t\t<\/td>\n<\/tr>\n\t\t\t\t\t\t<tr>\n<td class=\"enum-value\"><code>&quot;window&quot;<\/code><\/td>\n<td>\n\t\t\t\t\t\t\tWhen the popup opens, center in the window.\n\t\t\t\t\t\t<\/td>\n<\/tr>\n\t\t\t\t\t\t<tr>\n<td class=\"enum-value\">jQuery selector<\/td>\n<td>\n\t\t\t\t\t\t\tWhen the popup opens, create a jQuery object based on the selector, and center over it. The selector is filtered for elements that are visible with <code>&quot;:visible&quot;<\/code>. If the result is empty, the popup will be centered in the window.\n\t\t\t\t\t\t<\/td>\n<\/tr>\n\t\t\t\t\t<\/table>\n\t\t\t\t<\/p>\n\t\t\t\t<p>This option is also exposed as a data attribute: <code>data-position-to=&quot;window&quot;<\/code>.<\/p>\n\t\t\t<\/div>\n<strong>Code examples:<\/strong><p>Initialize the popup with the <code>positionTo<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">positionTo<\/span>: <span class=\"hljs-string\">&quot;window&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>positionTo<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> positionTo = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;positionTo&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;positionTo&quot;<\/span>, <span class=\"hljs-string\">&quot;window&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-shadow\" class=\"api-item\">\n<h3>shadow&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>true<\/code>\n<\/div>\n<div>\n\t\t\t\t<p>Sets whether to draw a shadow around the popup.<\/p>\n\t\t\t\t<p>This option is also exposed as a data attribute: <code>data-shadow=&quot;false&quot;<\/code>.<\/p>\n\t\t\t<\/div>\n<strong>Code examples:<\/strong><p>Initialize the popup with the <code>shadow<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">shadow<\/span>: <span class=\"hljs-literal\">false<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>shadow<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> shadow = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;shadow&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;shadow&quot;<\/span>, <span class=\"hljs-literal\">false<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-theme\" class=\"api-item\">\n<h3>theme&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>null, inherited from parent<\/code>\n<\/div>\n<div>\n<p>Sets the color scheme (swatch) for the popup contents. Unless explicitly set to &apos;none&apos;, the theme for the popup will be assigned the first time the popup is shown by inheriting the page theme or, failing that, by the hard-coded value &apos;c&apos;. If you set it to &apos;none&apos;, the popup will not have any theme at all, and will be transparent. <\/p>\n\t\t\t\t<p>Possible values: swatch letter (a-z).<\/p>\n\t\t\t\t<p>This option is also exposed as a data attribute: <code>data-theme=&quot;a&quot;<\/code>.<\/p>\n\t\t\t<\/div>\n<strong>Code examples:<\/strong><p>Initialize the popup with the <code>theme<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">theme<\/span>: <span class=\"hljs-string\">&quot;a&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>theme<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> theme = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;theme&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;theme&quot;<\/span>, <span class=\"hljs-string\">&quot;a&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-tolerance\" class=\"api-item\">\n<h3>tolerance&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>&quot;30,15,30,15&quot;<\/code>\n<\/div>\n<div>\n\t\t\t\t<p>Sets the minimum distance from the edge of the window for the corresponding edge of the popup. By default, the values above will be used for the distance from the top, right, bottom, and left edge of the window, respectively.<\/p>\n\t\t\t\t<p>You can specify a value for this option in one of four ways:\n\t\t\t\t\t<ol>\n\t\t\t\t\t\t<li>Empty string, null, or some other falsey value. This will cause the popup to revert to the above default values.<\/li>\n\t\t\t\t\t\t<li>A single number. This number will be used for all four edge tolerances.<\/li>\n\t\t\t\t\t\t<li>Two numbers separated by a comma. The first number will be used for tolerances from the top and bottom edge of the window, and the second number will be used for tolerances from the left and right edge of the window.<\/li>\n\t\t\t\t\t\t<li>Four comma-separated numbers. The first will be used for tolerance from the top edge, the second for tolerance from the right edge, the third for tolerance from the bottom edge, and the fourth for tolerance from the left edge.<\/li>\n\t\t\t\t\t<\/ol>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n<strong>Code examples:<\/strong><p>Initialize the popup with the <code>tolerance<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">tolerance<\/span>: <span class=\"hljs-string\">&quot;0,0&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>tolerance<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> tolerance = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;tolerance&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;tolerance&quot;<\/span>, <span class=\"hljs-string\">&quot;0,0&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-transition\" class=\"api-item\">\n<h3>transition&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>none<\/code>\n<\/div>\n<div>\n\t\t\t\t<p>Sets the default transition for the popup. The default value will result in no transition.<\/p>\n\t\t\t\t<p>If the popup is opened from a link, and the link has the data-transition attribute set, the value specified therein will override the value of this option at the time the popup is opened from the link.<\/p>\n\t\t\t<\/div>\n<strong>Code examples:<\/strong><p>Initialize the popup with the <code>transition<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">transition<\/span>: <span class=\"hljs-string\">&quot;pop&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>transition<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> transition = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;transition&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;transition&quot;<\/span>, <span class=\"hljs-string\">&quot;pop&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div><\/section><section id=\"methods\"><header><h2>Methods<\/h2><\/header><div id=\"method-close\"><div class=\"api-item first-item\">\n<h3>close()<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a> (<a href=\"http:\/\/learn.jquery.com\/jquery-ui\/widget-factory\/widget-method-invocation\/\">plugin only<\/a>)<\/span>\n<\/h3>\n<div>Closes the popup.\n\t\t\t<\/div>\n<ul><li><div class=\"null-signature\">This method does not accept any arguments.<\/div><\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the close method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;close&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div><\/div>\n<div id=\"method-open\"><div class=\"api-item\">\n<h3>open( options )<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a> (<a href=\"http:\/\/learn.jquery.com\/jquery-ui\/widget-factory\/widget-method-invocation\/\">plugin only<\/a>)<\/span>\n<\/h3>\n<div>display the popup using the specified options.\n\n\t\t\t\t<p>If <code>x<\/code> or <code>y<\/code> is missing, and no jQuery selector is given as the value of <code>positionTo<\/code>, the middle of the window will be used.<\/p>\n\t\t\t\t<p><code>transition<\/code> can be used to override the popup&apos;s own <code>transition<\/code> option. This will result in the popup opening via the transition specified in the call, but the popup&apos;s <code>transition<\/code> option will not be updated.<\/p>\n\t\t\t\t<p>Similarly, <code>data-position-to<\/code> can be used to override the popup&apos;s default positioning without modifying the value of the popup&apos;s <code>positionTo<\/code> option. The values available for <code>positionTo<\/code> are the same as those for the popup&apos;s <a href=\"#option-positionTo\"><code>positionTo<\/code> option<\/a>.<\/p>\n\t\t\t<\/div>\n<ul><li>\n<div><strong>options<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Object\">Object<\/a>\n<\/div>\n<div><\/div>\n<ul>\n<li>\n<div>\n<strong>x<\/strong> (default: <code><\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>The x-coordinate where the popup is to be displayed.<\/div>\n<\/li>\n<li>\n<div>\n<strong>y<\/strong> (default: <code><\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>The y-coordinate where the popup is to be displayed.<\/div>\n<\/li>\n<li>\n<div>\n<strong>transition<\/strong> (default: <code>&quot;none&quot;<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>The transition to use during the opening sequence.<\/div>\n<\/li>\n<li>\n<div>\n<strong>positionTo<\/strong> (default: <code>&quot;origin&quot;<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>The positioning to use.<\/div>\n<\/li>\n<\/ul>\n<\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the open method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;open&quot;<\/span>, options );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div><\/div>\n<div id=\"method-reposition\"><div class=\"api-item\">\n<h3>reposition( options )<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a> (<a href=\"http:\/\/learn.jquery.com\/jquery-ui\/widget-factory\/widget-method-invocation\/\">plugin only<\/a>)<\/span>\n<\/h3>\n<div>Change the on-screen position of the popup. See the <code>open()<\/code> method for a description of the keys recognized from the <code>options<\/code> object.<\/div>\n<ul><li>\n<div><strong>options<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Object\">Object<\/a>\n<\/div>\n<div><\/div>\n<ul>\n<li>\n<div>\n<strong>x<\/strong> (default: <code><\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Integer\">Integer<\/a>\n<\/div>\n<div>The x-coordinate where the popup is to be displayed.<\/div>\n<\/li>\n<li>\n<div>\n<strong>y<\/strong> (default: <code><\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Integer\">Integer<\/a>\n<\/div>\n<div>The y-coordinate where the popup is to be displayed.<\/div>\n<\/li>\n<li>\n<div>\n<strong>positionTo<\/strong> (default: <code>&quot;origin&quot;<\/code>)<\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>The positioning to use.<\/div>\n<\/li>\n<\/ul>\n<\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the reposition method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup( <span class=\"hljs-string\">&quot;reposition&quot;<\/span>, options );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div><\/div><\/section><section id=\"events\"><header><h2>Events<\/h2><\/header><div id=\"event-afterclose\" class=\"api-item first-item\">\n<h3>afterclose( event )<span class=\"returns\">Type: <code>popupafterclose<\/code><\/span>\n<\/h3>\n<div>\n<p>Triggered when a popup has completely closed<\/p>\n\t\t\t\t<p>This event is triggered when the popup has completely disappeared from the screen, meaning that all associated animations have completed.<\/p>\n\t\t\t<\/div>\n<ul><li>\n<div><strong>event<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Event\">Event<\/a>\n<\/div>\n<div><\/div>\n<\/li><\/ul>\n<p><em>Note: The <code>ui<\/code> object is empty but included for consistency with other events.<\/em><\/p>\n<div>\n<strong>Code examples:<\/strong><p>Initialize the popup with the afterclose callback specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">afterclose<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{}<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Bind an event listener to the popupafterclose event:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).on( <span class=\"hljs-string\">&quot;popupafterclose&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{} );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div>\n<div id=\"event-afteropen\" class=\"api-item\">\n<h3>afteropen( event )<span class=\"returns\">Type: <code>popupafteropen<\/code><\/span>\n<\/h3>\n<div>\n<p>Triggered after a popup has completely opened<\/p>\n\t\t\t\t<p>This event is triggered when the popup has completely appeared on the screen, meaning that all associated animations have completed.<\/p>\n\t\t\t<\/div>\n<ul><li>\n<div><strong>event<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Event\">Event<\/a>\n<\/div>\n<div><\/div>\n<\/li><\/ul>\n<p><em>Note: The <code>ui<\/code> object is empty but included for consistency with other events.<\/em><\/p>\n<div>\n<strong>Code examples:<\/strong><p>Initialize the popup with the afteropen callback specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">afteropen<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{}<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Bind an event listener to the popupafteropen event:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).on( <span class=\"hljs-string\">&quot;popupafteropen&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{} );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div>\n<div id=\"event-beforeposition\" class=\"api-item\">\n<h3>beforeposition( event, ui )<span class=\"returns\">Type: <code>popupbeforeposition<\/code><\/span>\n<\/h3>\n<div>\n<p>Triggered before a popup computes the coordinates where it will appear<\/p>\n\t\t\t\t<p>This event is triggered when the popup has completed preparations for appearing on the screen, when the document is resized and the popup needs to move to another location, or when the <code>reposition()<\/code> method is called. At this point the popup has not yet started the opening animations and it has not yet calculated the coordinates where it will appear on the screen. Handling this event gives an opportunity to modify the content of the popup before it appears on the screen. For example, the content can be scaled or parts of it can be hidden or removed if it is too wide or too tall. You can also modify the <code>options<\/code> parameter to affect the popup&apos;s placement. The properties inside the <code>options<\/code> object available for modification are the same as those used by the <code>reposition<\/code> method.<\/p>\n\t\t\t<\/div>\n<ul>\n<li>\n<div><strong>event<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Event\">Event<\/a>\n<\/div>\n<div><\/div>\n<\/li>\n<li>\n<div><strong>ui<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Object\">Object<\/a>\n<\/div>\n<div><\/div>\n<\/li>\n<\/ul>\n<p><em>Note: The <code>ui<\/code> object is empty but included for consistency with other events.<\/em><\/p>\n<div>\n<strong>Code examples:<\/strong><p>Initialize the popup with the beforeposition callback specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">beforeposition<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{}<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Bind an event listener to the popupbeforeposition event:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).on( <span class=\"hljs-string\">&quot;popupbeforeposition&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{} );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div>\n<div id=\"event-create\" class=\"api-item\">\n<h3>create( event, ui )<span class=\"returns\">Type: <code>popupcreate<\/code><\/span>\n<\/h3>\n<div>triggered when a popup is created<\/div>\n<ul>\n<li>\n<div><strong>event<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Event\">Event<\/a>\n<\/div>\n<div><\/div>\n<\/li>\n<li>\n<div><strong>ui<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Object\">Object<\/a>\n<\/div>\n<div><\/div>\n<\/li>\n<\/ul>\n<p><em>Note: The <code>ui<\/code> object is empty but included for consistency with other events.<\/em><\/p>\n<div>\n<strong>Code examples:<\/strong><p>Initialize the popup with the create callback specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).popup({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">create<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{}<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Bind an event listener to the popupcreate event:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).on( <span class=\"hljs-string\">&quot;popupcreate&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{} );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div><\/section><section class=\"entry-examples\" id=\"entry-examples\"><header><h2>Example:<\/h2><\/header><div class=\"entry-example\" id=\"example-0\">\n<p>A basic example of a Popup.<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!doctype <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">&quot;en&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">&quot;utf-8&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">&quot;viewport&quot;<\/span> <span class=\"hljs-attr\">content<\/span>=<span class=\"hljs-string\">&quot;width=device-width, initial-scale=1&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>popup demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">&quot;stylesheet&quot;<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/mobile\/1.3.2\/jquery.mobile-1.3.2.min.css&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/jquery-1.9.1.min.js&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">&quot;\/\/code.jquery.com\/mobile\/1.3.2\/jquery.mobile-1.3.2.min.js&quot;<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;page&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;page1&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;header&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>jQuery Mobile Example<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;content&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;#popupBasic&quot;<\/span> <span class=\"hljs-attr\">data-rel<\/span>=<span class=\"hljs-string\">&quot;popup&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span>&gt;<\/span>Open Popup<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;popup&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;popupBasic&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>This is a completely basic popup, no options set.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<h4>Demo:<\/h4>\n<div class=\"demo code-demo\"><\/div>\n<\/div><\/section>\n<\/div><\/article>","protected":false},"excerpt":{"rendered":"<p>Opens content in a Popup.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-102","post","type-post","status-publish","format-standard","hentry","category-widgets"],"_links":{"self":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/posts\/102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/comments?post=102"}],"version-history":[{"count":1,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/posts\/102\/revisions"}],"predecessor-version":[{"id":103,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/posts\/102\/revisions\/103"}],"wp:attachment":[{"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/media?parent=102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/categories?post=102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.3\/wp-json\/wp\/v2\/tags?post=102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}