CODEWITHSUNDEEP
jquery-mobile
KutePHP
KutePHP

Reputation: 2236

Jquery mobile - dialog box opens without close button

I just started exploring J query mobile. I tried to open a dialog with following code.

<a data-role="button" href="test_my_dialog.php" data-icon="plus" data-iconpos="left" data-mini="true" id="test_dialog" data-rel="dialog">Test Dialog </a>

The dialog opens but there is no close button and header as it is being displayed at demos at following link Dialogs

Is there anything I'm missing here ?

EDIT: The markup of test_my_dialog.php

    <div data-role="page">
        <div data-role="content">
             <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
            <legend>
                Add As
            </legend>
            <input id="radio1" name="RC_type" value="radio1" type="radio">
            <label for="radio1">
                Team Driver
            </label>
            <input id="radio2" name="RC_type" value="radio2" type="radio">
            <label for="radio2">
                Team Member (Driver2)
            </label>
        </fieldset>
    </div>
        </div>
    </div>

Upvotes: 1

Views: 1473

Answers (2)

tronc
tronc

Reputation: 693

Try modifying the page definition of your dialog with the following code and add a header-section to your dialog page

<div id='mydialog' data-role='page' data-add-back-btn='true'>
...
</div>

Upvotes: 1

Omar
Omar

Reputation: 31732

Add a header div to the dialog, it will automatically get a close button to the left.

Demo

<div data-role="page" id="myDialog">
  <div data-role="header">
    <h1>Header</h1>
  </div>
</div>

If you want to change button's position to right, add data-close-btn="right" attribute to dialog div.

<div data-role="page" id="myDialog" data-close-btn="right">

Upvotes: 1

Related Questions