on loading the page a message should open in popup in jquery mobile

Question

on loading the page a message should open in popup in jquery mobile. is it possible. Am having the following code in which am using a button, on clicking that the popup is opening but i need it directly while after loading the page without clicking on anything. please someone help me thanks.

<div id="content-area">
        <div class="list_icon"><img src="images/reset.png" width="42" height="41"/></div>
                    <div class="list_head">Reset Progress</div>
                    <div class="list_reset">
                        <a href="#popupStatus" data-rel="popup"><img src="images/reset_btn.png" /></a>
                    </div>  
       <div data-role="popup" id="popupStatus" data-position-to="window" data-corners="true" >
                <div data-role="content">
                    <div class="ui-popup">Do you want to Reset the progress</div>
                    <br/>                       
                    <hr >
                    <div id="confirm_btn">
                        <div style="width:40%;float:left">
                            <a href="#" onClick="resetprogress();" data-role="button" data-inline="true"  data-theme="c">
                                Yes
                            </a>
                        </div>
                        <div style="width:40%;float:right;">
                            <a href="#" class="ui-corner-all" data-role="button" data-rel="back" data-inline="true" data-transition="flow" data-theme="b">
                                No
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

1) popup div should be a direct child of `data-role=page`. 2) this answers your question: http://stackoverflow.com/a/15929161/1771795 — Omar, Feb 13 '14 at 10:49
hi omar i gave as but still it is showing nothing, is the div that am giving as popup is correct or not — user2419839, Feb 13 '14 at 11:02
atleast please help me to create a popup dialogue box please — user2419839, Feb 13 '14 at 11:33

Omar · Accepted Answer · 2014-02-13T13:13:13.330

1

First off, data-role="popup" should be a direct child of data-role="page". Don't place it inside any other div, otherwise, it won't fucntion/open properly.
To open a popup or close it programmatically, use .popup("open") or .popup("close").
You can't call a popup on pageshow without a setTimeout(). You need to delay opening it to ensure that page has passed all events and is fully shown.
Update: To close popup from a button, add data-dismissible="false" and data-history="false" attributes to popup div. For closing button add data-rel="back", or close it programmatically .popup("close").
```
$(document).on("pageshow", "#page_ID", function () {
  setTimeout(function () {
    $("#popup_ID").popup("open");
  }, 100);
});
```

Demo

edited Feb 13 '14 at 13:13

answered Feb 13 '14 at 11:45

Omar

32,302
9
69
112

hi omar it is working on clicking on the button but needed while loading the page itself – user2419839 Feb 13 '14 at 12:10
It works when change page, from main to next page. It doesn't open on click. – Omar Feb 13 '14 at 12:16
yes i have found that but for two pages am having seperate files, so there was some confusion – user2419839 Feb 13 '14 at 12:27
Are you using single page model? Multi html files? – Omar Feb 13 '14 at 12:29
hi omar can we remove scroll for this popup, and also, one more problem is clicking on anywhere on the page, the popup is closing. it should close only clicking on exact button, the popup is as follows
Do you want Reset progress

Yes
No
– user2419839 Feb 13 '14 at 12:44
@user2419839 what do you mean by scroll? check updated answer. – Omar Feb 13 '14 at 13:10

on loading the page a message should open in popup in jquery mobile

1 Answers1