Opening External URL in JQuery UI Dialog on Wordpr

Question

I have a custom template page I'm building for a wordpress site (using a modified Twenty Eleven theme). In the page there are links that are created programmaticly. There will be several links such as this:

<a href="http://www.site.com.com/info.php?id=123" class="uimodal">More Information</a>

I would like any URL with the class of uimodal to come up in a jQuery UI modal window (dialog) but I'm having problems getting it to do so.

I've successfully loaded jQuery UI. I have tried several code snippets online, not getting any errors via Firebug, it just doesn't load modal (just replaces the current page).

Any help is appreciated!

Thanks.

Answer 1

Try something like this: http://jsfiddle.net/hSRdr/

$(function() { // same as $(document.ready(function() {
    $('a.uimodal').on('click', function() {
        var href = $(this).attr('href');

        $('<div>').append('<iframe src="' + href + '"></iframe>').dialog();
        return false;
    });
});