Search code examples
jqueryjquery-mobilemodal-dialogjquery-ui-dialogmobile-browser

JQuery need to call data-rel="dialog" in the first page or opening page

I am new to JQuery i figured out that i can use JQuery for mobile web browser dev. I am doing a simple pop page for Browser. I went through some documents and got the answer i can use data-rel="dialog" for the modal window like page. But i want the modal like window as my opening page. (Page 1) This is my code. Please help me. I am new to this one. Thank You.

 <body>
<!-- This is the first page -->
<section id="firstpage" data-rel="dialog" data-role="page">
    <header data-role="header">
        <h1>Page Content Header</h1>
    </header>
    <div data-role="content">
    <p>This is page 1</p>
    <p><a href="#secondpage" data-rel="dialog">Display Dialog</a></p>
    </div>

</section>

<!-- This page will be displayed as a dialog -->
<div id="secondpage" data-rel="dialog" data-role="page">

     <div data-role="content">
            <div>
                <h1 class="text-align-center">
                    <b>
                        Apple
                    </b>
                </h1>
            </div>


            <a data-role="button" data-transition="none" data-theme="b" href="http://m.apple.com">
                Go
            </a>
        </div>

</div>

Solution

  • Change the data-role to dialog. Then you can just get rid of the data-rel attribute. i.e.

    <section id="firstpage" data-role="dialog">
    <header data-role="header">
        <h1>Page Content Header</h1>
    </header>
    <div data-role="content">
        <p>This is page 1</p>
        <p><a href="#secondpage" data-rel="dialog">Display Dialog</a></p>
    </div>

</section>