I have a jQuery mobile page with a popup that needs to be shown on page load. For some reason the popup shows and closes straightaway. I'm using chrome on desktop. Tested on chrome on android, shows the same thing. This is a test page which shows the same problem:
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.0.min.css"/>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.0.min.js"></script>
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<script type="text/javascript">
$(document).on("pageshow",function(){
$("#testpopup").popup("open",{history:false});
});
</script>
</head>
<body>
<div class="page01" data-role="page">
<div id="page-content" data-role="content" data-theme="f">
adasdf
</div>
<div data-role="popup" data-position-to="window" data-history="false" data-dismissible="false" id="testpopup" data-theme="d">
<div data-role="content">
ASDFASDFASDF
</div>
</div>
</div>
</body>
</html>
I can't figure out how to make it work. Any help would be appreciated!
