Question

I have a JavaScript function that receives a parameter whose value is a fragment of HTML. I would like to show this content in a centered modal dialog (with a close button).

var showContent = function(content) {
    // TODO show content in model dialog
}

I’m already using JQuery, and don’t mind installing another plugin if necessary, as long as it’s fairly small. I’m not using JQueryUI and would prefer to avoid it, as I won’t be using it for anything else.

Answer 1

This plugin looks promising: SimpleModal (9.6KB minified)

You open it with the contents of the selected element, or with some HTML as the content:

$("selector").modal();
$.modal("<p>Hello world</p>");

So in your case, you could do this:

var showContent = function(content) {
    $.modal(content);
}

You need only 2 styles:

#simplemodal-overlay { ... }
#simplemodal-container { ... }

It looks like this (on the demo page):