Reputation: 23
I have tried some of the snippets but some how it does not work for me may be my approach is not correct.
it just displays dialog wihout poping
here is my completed code. Some body please help me out.
i tried this code in jsbin.com editer.
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div id="divid" data-rel="dialog" >
dialog
</div>
</div>
<script>
(function(){
$.mobile.changePage( $('#divid'), { role: 'dialog', transition: 'pop'} );
})();
</script>
</body>
</html>
Upvotes: 1
Views: 1599
Reputation: 31732
Note: The dialog widget is deprecated in 1.4 and will be removed in 1.5. The page widget now has the dialog option which, when set to true will apply dialog styling to a page.
As of jQuery Mobile, there is no data-role=dialog
, instead, a page can be converted into a dialog by add data-dialog="true"
attribute to page div.
<div data-role="page" data-dialog="true" id="foo">
<div data-role="header" data-close-btn="right">
<h1>Dialog</h1>
</div>
<!-- contents -->
</div>
To call it programmatically:
$.mobile.pageContainer.pagecontainer("change", "#foo", {
transition: "pop"
});
Upvotes: 3