Question

I am using jquery mobile 1.1.1 and jquery core 1.7.1. The issue is that when i try to open a dialog box it does’nt work. The same code is working for jquery mobile 1.0.1. I have tried using jquery core 1.8.0 but this did’nt worked as well. Can anyone help? . Here is the jsfiddle link: http://jsfiddle.net/zteV3/18/

Answer 1

Try the following:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

<div id="home" data-role="page">
    <div data-role="content">
        <a href="#payments" data-rel="dialog" data-role="button" data-transition="pop">Open dialog</a>
    </div>
</div>

<div id="payments" data-role="page" data-url="payments">
    <div data-role="content">
        <p>Some Content Here</p>
        <a href="#home" data-role="button">Close</a>
    </div>
</div>

Your CSS references (in <link> tags) where not defined correctly.

I tested it on jsfiddle and it works fine now 😉