How to load Dialog or Popup before page load using jquery mobile

Question

How to load Dialog or Popup before page load using jquery mobile

7.6k views Asked by Prasad At 08 May 2013 at 12:42

Is there any method to call/show Dialog or popup before page load using jquery Mobile?

I want to get some input before page load and according to that input next page will be loaded

Original Q&A

There are 3 answers

**Freelancer** · Answer 1 · 2013-05-08 12:49:12

Freelancer On 08 May 2013 at 12:49

Try Following:

$.mobile.loading( 'show', {
    text: 'foo',
    textVisible: true,
    theme: 'z',
    html: ""
});

Refere Link:

http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html

**Omar** · Answer 2 · 2013-05-08 12:55:26

To load a dialog or a popup before showing a page, you need to use seTimeout. if you call it without a delay, it will open and close at once.

$(document).on('pagebeforeshow', '#pageID', function() {
 setTimeout(function () {
  $('#popupID').popup('open');
 }, 100); // delay above zero
});

Similar issue.

**Gajotres** · Answer 3 · 2013-05-08 20:52:16

There's a very simple solution to your question, only thing you need to do is make your first page to be a dialog.

Working example: http://jsfiddle.net/Gajotres/dj3UP/1/

As you can see it in my example this is a pure HTML solution. First page data-role attribute was changed to dialog.

HTML :

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="dialog" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
        </div>

        <div data-role="content">
            <input type="text" value="" id="some-input"/>
            <a data-role="button" id="some-button" href="#second">Next page</a>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div> 
    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
            <a href="#index" class="ui-btn-left">Back</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>

TechQA.

How to load Dialog or Popup before page load using jquery mobile

There are 3 answers

Related Questions in JQUERY

Related Questions in JQUERY-MOBILE

Related Questions in JQUERY-MOBILE-POPUP

Related Questions in JQUERY-MOBILE-DIALOG

Popular Questions

Popular Tags

Trending Questions