www.webdeveloper.com
Results 1 to 3 of 3

Thread: Open Dialog Box When Page Loads Up??

Hybrid View

  1. #1
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    79

    Open Dialog Box When Page Loads Up??

    I would like to open a dialog box when the page loads up but can't figure out how to go about doing this.
    Right now you have to click on a button to open the dialog box.
    I'm going crazy trying to figure this one out.


    Here's my code:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    	<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    </head>
    
    <body>
    <a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-b">Open</a>
    <div data-role="popup" id="popupDialog" data-theme="a" class="ui-corner-all" data-dismissible="false">
        <form>
            <div style="padding:10px 20px;">
                <h3>Please sign in</h3>
                <label for="un" class="ui-hidden-accessible">Username:</label>
                <input name="user" id="un" value="" placeholder="username" data-theme="a" type="text">
                <label for="pw" class="ui-hidden-accessible">Password:</label>
                <input name="pass" id="pw" value="" placeholder="password" data-theme="a" type="password">
                <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Sign in</button>
            </div>
        </form>
    </div>
    
    </body>
    </html>

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    873
    To simplify things just add the jQuery UI framework files
    HTML Code:
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    Then you can simply add this line in your javascript to bring up a dialog box when the page loads:
    Code:
    (function(){ $("#popupDialog").dialog(); })();
    And if you want more control over how the dialog box looks or other parameters you can edit to get the dialog box to your liking, check out the documentation: https://jqueryui.com/dialog/
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    79
    Not sure if I'm doing this right.
    I implemented the codes as you have suggested but it still doesn't work.

    Here are my new code:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    	<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
    	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    	<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    	
    	<script>
    	window.onload = (function(){ $("#popupDialog").dialog(); })();
    	</script>
    </head>
    
    <body>
    <a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-b">Open</a>
    <div data-role="popup" id="popupDialog" data-theme="a" class="ui-corner-all" data-dismissible="false">
        <form>
            <div style="padding:10px 20px;">
                <h3>Please sign in</h3>
                <label for="un" class="ui-hidden-accessible">Username:</label>
                <input name="user" id="un" value="" placeholder="username" data-theme="a" type="text">
                <label for="pw" class="ui-hidden-accessible">Password:</label>
                <input name="pass" id="pw" value="" placeholder="password" data-theme="a" type="password">
                <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Sign in</button>
            </div>
        </form>
    </div>
    
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles