show HTML markup in modal window

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):

Answer 2

You can do it without any plugin... Just use this.

HTML:

<div class="overlay-div">
<div class="modal-div">
           <div style="float:right" class="x-button">X</div>
</div>
</div>

CSS:

        .overlay-div
        {
            display:none;
            z-index:100;
            background-color:rgba(0,0,0,0.44);
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#44000000,endColorstr=#44000000)\9; //for IE    
            position:absolute;
            top:0;
            left:0;

        }

        .overlay-div .modal-div
        {
             width:500px;
             height:480px;
             position:fixed;
             top:50%;
             left:50%;
             margin:-240px 0 0 -250px; //must be proportional to width and height
             padding:25px;
             background:#fff;
             z-index:1;
        }

        .x-button
        {
             cursor:pointer;
        }

Javascript:

var showContent = function(content) {
    $(".overlay-div").width($("html").width());
    $(".overlay-div").height(getDocHeight());
    $(".modal-div").append(content);
    $(".overlay-div").show();
}

$("#x-button").click(function () {
            $(".overlay-div").hide();
        });

//Cross-browser way to get page height
function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
            );
}

Answer 3

You can check the below link.

http://www.queness.com/resources/html/modal/jquery-modal-window.html