CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
user2419839
user2419839

Reputation: 63

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

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>

Upvotes: 1

Views: 968

Answers (1)

Omar
Omar

Reputation: 31732

  • 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

Upvotes: 1

Related Questions