How do I open a page's content from an Href link to display it inside a JQuery UI Dialog?

Question

I have a link like this and I want to open its content and display it using the code below:

<a class="uimodal" href="/Administration/Contact">Contact</a> 

How can I make that link open the href content and display it inside of a jQuery UI modal dialog?

Answer 1

The best way is to use an Ajax Load operation to retrieve the content into a new element. Then when the data is loaded, call the modal on that element:

$('a.uimodal').bind('click', function() {
   var $this = $(this);
   var outputHolder = $("<div id='.uimodal-output'></div>");
   $("body").append(outputHolder);
   outputHolder.load($this.attr("href"), null, function() {
      outputHolder.dialog(// whatever params you want);
   });
   return false;
});

AJAX Load: http://api.jquery.com/load/ Dialog Options: http://jqueryui.com/demos/dialog/

Note: You could also display the modal while the AJAX page is loading by putting outputHolder.dialog(//...) prior to calling the load method.

Answer 2

I'm loading content in a dialog box without using IFrame. This is how I do it:

First you have to initilize your dialog box. You can use something like this:

if (jQuery("#dialog_contact").length > 0) {
    jQuery("#dialog_contact").dialog({
        title: "File browser",
        modal: true,
        autoOpen: false,
        height: 700,
        width: 800,
        closeText: 'hide',
        open: function () {
            // Here I load the content. This is the content of your link.
            jQuery("#dialog_contact").load("../wp-content/plugins/my_plugin/somPage.php", function () {});
        }
    });
}

// Then open the dialog window on click
jQuery('.uimodal').live('click', function () {
    jQuery('.dialog_contact').dialog('open')
});

See more info here: http://jqueryui.com/demos/dialog/