Question

I’m trying to display a modal box with another page inside, but I just can’t seem to get it to work. Here are two of my failed attempts:

$(document).ready(function() {
    $('#shraPop').click(function() {
        var src = "shra-pop.php";
        $.dialog('<iframe src="' + src + '" height="450" width="830" style="border:0">');

        return false;
    });
});

and

$(document).ready(function() {
    $('#shraPop').click(function() {
        var dialog = $('<div></div>').load("http://www.google.com");
        $(dialog).dialog();
        return false;
    });
});

The jQuery dialog is working fine on it’s on by the way, so I have included the right files. It just won’t work when trying to load the page I’m trying to load.

Any suggestions very welcome, thanks!

jsFiddle: http://jsfiddle.net/ZpECL/1/

Answer 1

In your second function your quotes are mismatched

var $dialog = $('<div>testing</div>').load("shra-pop.php');

the load() has both double and single quotes.

Not sure if the $ before the dialog variable is necessary.

I would recommend putting your code in a jsfiddle for us to see if you are still having problems.

Also, Colorbox is a great alternative if you want more functionality.