jQuery mobile popup call from JS
jquery, mobile, popup
Solution
I was doing this just the other day, and this is how it works for me. The code is on jsFiddle so you can check it out and also here is the code for consistency issues. Also, you may want to make sure you're referencing the newest 1.2 version.
This js code goes just before the `</head>` tag:
$(document).ready(function(){
$( "#popupLogin" ).popup( "open" );
});
html:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<section id="home" data-role="page">
<header data-role="header">
<h1>test page</h1>
</header>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<h3 class="centerText">Register free!</h3>
<div class="popup">
<form>
<input type="email" name="email" id="email" class="centerText" placeholder="email" data-theme="a"/>
<button type="submit" data-theme="b">Sign me up</button>
<p class="centerText">
text1<br/>
text2<br/>
etc...<br/>
</p>
</form>
</div>
</div>
</section>
</body>
</html>
Problem
I have defined popup div and i want to open on some event, not using href. I have defined popup div like: ``` <div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all"> <div data-role="header" data-theme="a" class="ui-corner-top"> <h1>Sample Page</h1> </div> <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content"> <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">OK</a> </div> </div> ``` and I tried calling this popup div ``` $("#popupDialog").popup; $("#popupDialog").popup(); $("#popupDialog").popup("open"); ``` None of them are not working. Any suggestion.