I am trying to create an app in JQuery Mobile in which I can dynamically create buttons with popups. I have this code, but whenever I refresh the page, it opens automatically at the top of the screen, unlike all of the other popups.
$(document).on("pageinit", "#home", function() {
$(".img-holder").append(
$("<div />", {"class" : "spot_holder"}).append(
$("<a />", {
"href" : "#ashcloud",
"data-rel" : "popup",
"class" : "spot ui-btn ui-nodisc-icon ui-btn-icon-notext ui-corner-all",
"data-transition" : "flip",
"style" : "top: 35px; left: 240px"
})
).append(
$("<div />", {
"data-role" : "popup",
"id" : "ashcloud"
}).append(
$("<p />").text("Ash Cloud")
).popup()
)
)
})
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/jQueryMobile/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="styles.css">
<script src="js/jQueryMobile/jquery-1.11.3.min.js"></script>
<script src="js/jQueryMobile/jquery.mobile-1.4.5.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div class="ui-content">
<div class="img-holder">
<img src="img/volcano.jpg" class="image" width="500px">
<!--
<div class="spot-holder">
<a href="#ashcloud"
data-rel="popup"
class="spot ui-btn ui-nodisc-icon ui-btn-icon-notext ui-corner-all"
data-transition="flip"
style="top: 35px; left: 240px;"></a>
<div data-role="popup" id="ashcloud">
<p>Ash Cloud</p>
</div>
</div>
-->
<div class="spot-holder">
<a href="#mainpipe"
data-rel="popup"
class="spot ui-btn ui-nodisc-icon ui-btn-icon-notext ui-corner-all"
data-transition="flip"
style="top: 250px; left: 232px;"></a>
<div data-role="popup" id="mainpipe">
<p>Main Pipe</p>
</div>
</div>
<div class="spot-holder">
<a href="#sidevent"
data-rel="popup"
class="spot ui-btn ui-nodisc-icon ui-btn-icon-notext ui-corner-all"
data-transition="flip"
style="top: 180px; left: 210px"></a>
<div data-role="popup" id="sidevent">
<p>Side Vent</p>
</div>
</div>
<div class="spot-holder">
<a href="#lavaflow"
data-rel="popup"
class="spot ui-btn ui-nodisc-icon ui-btn-icon-notext ui-corner-all"
data-transition="flip"
style="top: 120px; left: 215px"></a>
<div data-role="popup" id="lavaflow">
<p>Lava Flow</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Never mind I have found a solution.
Instead of creating a popup for every button, create a single popup that is chared across all of the buttons, then through JS, change the text in the popup for every time you click on it.
It looks like you are trying to create dialogue in pure jQuery way rather than jQuery Mobile.
Below is example how to create jQuery Mobile dialogue. Notice, that there is no Javascript code here. All you need is to create page with data-dialog="true" attribute and link it from your [main] page.
<!--...-->
<!-- page Help -->
<div data-role="page" id="help" data-theme="b">
<!-- header (same data-id for persistent toolbar) -->
<div data-role="header" data-id="tabnav-header" data-position="fixed"
data-theme="b">
<h1>MyApp</h1>
</div>
<!-- content -->
<div data-role="content" class="content_div">
<ul data-role="listview">
<li>About</li>
</ul>
</div>
<!-- footer -->
<div data-role="footer" data-id="tabnav-footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Help</li>
</ul>
</div>
</div>
</div>
<!-- This page is actually a dialogue window -->
<div data-role="page" data-dialog="true" id="about" data-theme="b">
<div data-role="header" data-theme="b">
<h1>About</h1>
</div>
<div data-role="main" class="ui-content" data-theme="b">
MyApp. All rights deserved.
</div>
<div data-role="footer" data-theme="b"></div>
</div>
...
There is an example on JQ mobile how to create popup dynamically. http://demos.jquerymobile.com/1.4.1/popup-dynamic/
First, they appends on pagecreate event instead of "pageinit".
Second, and I think this is the trick, they call "trigger("pagecreate")" after append.
$.mobile.activePage.append( popup ).trigger( "pagecreate" );
Related
I have tried to get the following demo working using a collapsible set instead of a listview and I am unable to do so:
http://forresst.github.io/2012/06/22/Make-a-list-jQuery-Mobile-sortable-by-drag-and-drop/
Once the collapsible set is made sortable, the collapse functionality gets broken.
I am using:
JQuery Mobile 1.4.5
JQuery 1.11.0
JQuery-UI 1.11.4
Cordova 6.3.0
And I'm testing this on Android (SGS4)
HTML:
<script type="text/javascript" src="lib/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="lib/jqm/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui/jquery-ui.touch-punch.min.js"></script>
<div data-role="page" id="test">
<div role="main" class="ui-content">
<div data-role="collapsibleset" data-theme="a" data-content-theme="a" class="sortable">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
</div><!-- /content -->
</div><!-- /test page -->
JavaScript:
$(document).on("pageshow","#test",function(){
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();
/// Refresh list to the end of sort to have a correct display
$( ".sortable" ).bind( "sortstop", function(event, ui) {
$('.sortable').collapsibleset('refresh');
// $('.sortable').listview('refresh');
});
});
pageshow event not firing. Go through the following code, it is working perfectly.
HTML code:
<html>
<head>
<title>Drag and Drop</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<div data-role="page" id="test">
<div role="main" class="ui-content">
<div data-role="collapsibleset" data-theme="a" data-content-theme="a" class="sortable">
<div data-role="collapsible">
<h3>Section 1</h3>
<p>I'm the collapsible content for section 1</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
</div><!-- /content -->
</div><!-- /test page -->
</body>
</html>
js code:
$(document).ready(function(){
$(".sortable").sortable();
$(".sortable").disableSelection();
/// Refresh list to the end of sort to have a correct display
$(".sortable").bind( "sortstop", function(event, ui) {
$('.sortable').collapsibleset('refresh');
// $('.sortable').listview('refresh');
});
});
I hope this will help someone else out. I have not been able to get a collapsible set to work correctly with drag and drop functionality in cordova, so I came up with a different method. I just placed buttons on the collapsible header so that they can move up or down. Here is the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/app.css" rel="stylesheet" >
<link href="lib/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
<link href="lib/jquery-ui/jquery-ui.structure.min.css" rel="stylesheet" />
<link href="lib/jquery-ui/jquery-ui.theme.min.css" rel="stylesheet" />
<link href="lib/jqm/jquery.mobile.structure-1.4.5.min.css" rel="stylesheet" />
<link href="lib/jqm/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
<script type="text/javascript" src="lib/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="lib/jqm/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="lib/jsignature/jSignature.min.js"></script>
</head>
<body>
<div data-role="page" id="test">
<div role="main" class="ui-content">
<div data-role="collapsibleset" data-theme="a" data-content-theme="a" class="sortable ui-collapsible-set ui-group-theme-a ui-corner-all" data-enhanced="true">
<div data-role="collapsible" id="collapsible-1" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-enhanced="true">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-a">Section 1<span class="ui-collapsible-heading-status"> click to expand contents</span>
</a>
<span class="span-move-up">
<a href="#" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-up circular-btn ui-icon-arrow-u">
<span class="ui-icon-arrow-u ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
<span class="span-move-down">
<a href="#" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-down circular-btn ui-icon-arrow-d">
<span class="ui-icon-arrow-d ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
</h3>
<div class="ui-collapsible-content ui-body-a ui-collapsible-content-collapsed" aria-hidden="true">
<p>I'm the collapsible content for section 1</p>
</div>
</div>
<div data-role="collapsible" id="collapsible-2" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-enhanced="true">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-a">Section 2<span class="ui-collapsible-heading-status"> click to expand contents</span>
</a>
<span class="span-move-up">
<a href="#" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-up circular-btn ui-icon-arrow-u">
<span class="ui-icon-arrow-u ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
<span class="span-move-down">
<a href="#" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-down circular-btn ui-icon-arrow-d">
<span class="ui-icon-arrow-d ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
</h3>
<div class="ui-collapsible-content ui-body-a ui-collapsible-content-collapsed" aria-hidden="true">
<p>I'm the collapsible content for section 2</p>
</div>
</div>
<div data-role="collapsible" id="collapsible-3" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-enhanced="true">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-a">Section 3<span class="ui-collapsible-heading-status"> click to expand contents</span>
</a>
<span class="span-move-up">
<a href="#" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-up circular-btn ui-icon-arrow-u">
<span class="ui-icon-arrow-u ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
<span class="span-move-down">
<a href="#" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-down circular-btn ui-icon-arrow-d">
<span class="ui-icon-arrow-d ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
</h3>
<div class="ui-collapsible-content ui-body-a ui-collapsible-content-collapsed" aria-hidden="true">
<p>I'm the collapsible content for section 3</p>
</div>
</div>
<div data-role="collapsible" id="collapsible-4" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-enhanced="true">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-a">Section 4<span class="ui-collapsible-heading-status"> click to expand contents</span>
</a>
<span class="span-move-up">
<a href="#" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-up circular-btn ui-icon-arrow-u">
<span class="ui-icon-arrow-u ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
<span class="span-move-down">
<a href="#" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true" data-corners="true" class="move-collapsible-down circular-btn ui-icon-arrow-d">
<span class="ui-icon-arrow-d ui-btn-icon-right" style="float: right;"></span>
</a>
</span>
</h3>
<div class="ui-collapsible-content ui-body-a ui-collapsible-content-collapsed" aria-hidden="true">
<p>I'm the collapsible content for section 4</p>
</div>
</div>
</div>
</div><!-- /content -->
</div><!-- /test page -->
</body>
CSS:
.circular-btn {
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
padding: 0px !important;
margin: 0px !important;
}
.circular-btn span span {
height: 100px !important;
line-height: 70px;
}
.span-move-up {
position: relative;
z-index: 10;
float: right;
top: -22px;
left: -40px;
}
JavaScript:
$('.move-collapsible-up').on('tap',function(event) {
event.stopPropagation();
event.preventDefault();
var currCollapseElem = $(this).parent().parent().parent();
var prevCollapseElem = currCollapseElem.prev('div');
/// detach and attach the add button
currCollapseElem.insertBefore(prevCollapseElem);
$('.sortable').collapsibleset('refresh');
});
$('.move-collapsible-down').on('tap',function(event) {
event.stopPropagation();
event.preventDefault();
var currCollapseElem = $(this).parent().parent().parent();
var nextCollapseElem = currCollapseElem.next('div');
/// detach and attach the add button
currCollapseElem.insertAfter(nextCollapseElem);
$('.sortable').collapsibleset('refresh');
});
Again, I hope this helps someone. If I have any issues in my code please don't hesitate to comment.
Using jQuery mobile I'm creating a simple form that displays a collapsible list of car brands. Under this collapsible list will be the different models of the car brand. When one clicks/touches the car model, I want to be able to load to another page that will display some statistics of the certain car model. I'm not quite sure how to link to another page/HTML file. This is what I have so far:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style>
a.test {
font-weight: bold;
}
</style>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- view port sets the bar as wide as the screen -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.css" />
<script src="jquery.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Dream Ride</h1>
</div><!-- /header -->
<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h1>Honda</h1>
//code to link to other HTML files or pages
<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h3>BMW</h3>
<p>sdfsdf</p>
</div>
<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h3>Mercedez</h3>
<p>sdfsdf</p>
</div>
<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h3>Audi</h3>
<p>sdfsdf</p>
</div>
<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h3>Ferrari</h3>
<p>sdfsdf</p>
</div>
<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h3>Lamborghini</h3>
<p>sdfsdf</p>
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>My Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
I'm assuming your talking about loading a page without reloading the whole document. To do that with jQuery Mobile create another <div data-role="page"> and give it an id attribute. In your first page just link to it with an anchor tag:
Example:
<div data-role="page" id="one">
<div data-role="content">
<h1>Page One</h1>
Go to page two
</div>
</div>
<div data-role="page" id="two">
<div data-role="content">
<h1>Page Two</h1>
Go to page one
</div>
</div>
Demonstration on JSFiddle: http://jsfiddle.net/VaeCL/
i'm trying to configure a slide-panel jqm 1.3.1. I always created "one page-jqm"-Pages
one index.html and several
Now im trying to get the slide panel to work but when i add a second page, the page stuck in loading screen.
My code will explain what i mean:
<!DOCTYPE html>
<html lang="de">
<head>
...
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<!-- jQuery and jQuery Mobile -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<!-- Page 1 -->
<div data-role="page" id="page1">
<div id="header" data-theme="c" data-role="header">
<a id="men" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
</a>
<h3>Body Change</h3>
</div>
<div id="content" data-role="content">
Test123
</div>
<div id ="footer" data-role="footer">
footer
</div>
<div data-role="panel" id="menue" data-display="push" data-theme="a">
<div data-role="controlgroup">
<h2>Menü</h2>
Home
Erlaubte Lebensmittel
Verbotene Lebensmittel
Frühstück
</div>
</div>
<div>
<!-- Page 2 -->
<div data-role="page" id="page2">
<div id="header" data-theme="c" data-role="header">
<a id="men" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
</a>
<h3>Body Change</h3>
</div>
<div id="content" data-role="content">
Test123
</div>
<div id ="footer" data-role="footer">
footer
</div>
<div data-role="panel" id="menue" data-display="push" data-theme="a">
<div data-role="controlgroup">
<h2>Menü</h2>
Home
Erlaubte Lebensmittel
Verbotene Lebensmittel
Frühstück
</div>
</div>
<div>
I thank you all for your help in advance
cracker182
EDIT: browser console shows :
Uncaught TypeError: Cannot read property 'options' of undefined
EDIT2: I forgot to Close the page Divs, thank you very much Omar
I stripped your footer menu blocks and if you look at this structure it will probably help you out to why your page is not navigating to the next page... Be sure to take a look at the naming conventions as well pertaining to the anchor tags...
<!DOCTYPE html>
<html lang="de">
<head>
...
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<!-- jQuery and jQuery Mobile -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<!-- Page 1 -->
<section id="firstpage" data-role="page">
<div id="header" data-theme="c" data-role="header">
<a id="menu" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info"></a>
<h3>Body Change</h3>
</div>
<div id="content" data-role="content">
<p>This is page 1</p>
<p>Go to second page</p>
</div>
<div id ="footer" data-role="footer">
footer
</div>
<div>
</section>
<!-- Page 2 -->
<div data-role="page" id="secondpage">
<div id="header" data-theme="c" data-role="header">
<a id="menu" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
</a>
<h3>Body Change</h3>
</div>
<div id="content" data-role="content">
this is page 2
<p>Go to first page</p>
</div>
<div id ="footer" data-role="footer">
footer
</div>
<div>
I'm having a little trouble and i don't know how to solve it. The problem is that i have a HTML5 code with diferents pages (tags with ids), i'm using Jquery Mobile to swith between the pages with buttons. I don't know why, but one of the button stop working (Option button), but the others keep working just fine as always. This is the html code:
UPDATED CODE!
</head>
<body>
<!-- **************** PAG PRINCIPAL **************** -->
<div data-role="page" id="principal">
<div data-theme="a" data-role="header">
<h3 id="nombreAplicacion">
Nombre Aplicacion
</h3>
</div>
<div data-role="content">
<div style="width: 50%; height: 100px; position: relative; background-color: #fbfbfb; border: 1px solid #b8b8b8;"
id="imagenUsuario">
<img id="imagenUsuario" src="http://codiqa.com/static/images/v2/image.png"
alt="image" style="position: absolute; top: 50%; left: 50%; margin-left: -16px; margin-top: -18px">
</div>
<h4 id="nombreUsuario">
<p id="nmb">Nombre Usuario </p>
</h4>
<a id="botonEjercicios" data-role="button" data-direction="reverse" data-transition="slideup"
data-theme="a" href="#ejercicios" data-icon="arrow-u" data-iconpos="left">
Ejercicios
</a>
<a id="botonEstadisticas" data-role="button" data-direction="reverse"
data-transition="slidedown" data-theme="a" href="#estadisticas" data-icon="arrow-d"
data-iconpos="left">
Estadisticas
</a>
<a data-role="button" data-transition="flow" data-theme="a" href="#opciones"
data-icon="gear" data-iconpos="left">
Opciones
</a>
<a data-role="button" data-transition="flow" data-theme="a" id="botonReset"
data-icon="gear" data-iconpos="left">
Reset Datos Ejercicios
</a>
</div>
</div>
<!-- **************** EJERCICIOS **************** -->
<div data-role="page" id="ejercicios">
</div>
<!-- **************** ACTIVAR EJERCICIOS *************** -->
<div data-role="page" id="activarEjercicios">
</div>
<!-- **************** ESTADISTICAS **************** -->
<div data-role="page" id="estadisticas">
</div>
<!-- **************** OPCIONES **************** -->
<div data-role="page" id="opciones">
</div>
</body>
</html>
This code works fine if i try it in Google Chrome offline (just reading the html), but with firefox the option butoon does not work. In my online page, doesn't work with chrome or firefox neither
I was having trouble with a function, i fixed the code and now it works. The strange thing is that in Google Chrome works with the broken code, don't know why is that...
Trying to learn popup and found that JQM popup "Dialog" sample doesn't work - nothing appears when I press button "Delete page...".
My html body is:
<div data-role="page" id="page_test1" data-theme="b">
<div data-role="content">
Delete page...
</div> <!-- /content -->
</div> <!-- /page -->
<!-- Exactly copied from http://view.jquerymobile.com/1.3.1/dist/demos/widgets/popup/ (sample "Dialog") -->
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Delete Page?</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.</p>
Cancel
Delete
</div> <!-- content -->
</div> <!-- popup -->
As you can see, my portion of html is a bit.
You can find such behaviour of popup here - http://jsfiddle.net/vbulash/YkEAj/
The popup must be inside the data-role="page" container.
<div data-role="page" id="page_test1" data-theme="b">
<div data-role="content"> Delete page...
</div>
<!-- /content -->
<!-- Exactly copied from http://view.jquerymobile.com/1.3.1/dist/demos/widgets/popup/ (sample "Dialog") -->
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Delete Page?</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.</p> Cancel
Delete
</div>
<!-- content -->
</div>
<!-- popup -->
</div>
<!-- /page -->
http://jsfiddle.net/YkEAj/1/