CODEWITHSUNDEEP
jqueryjquery-mobile
vinay
vinay

Reputation: 23

how to pop a dialog in mobile using mobile jquery with out click event

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

Answers (1)

Omar
Omar

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"
});

Demo

Upvotes: 3

Related Questions