Show HTML markup in a modal window

Question

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

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

I already use jQuery and do not mind installing another plugin, if necessary, as long as it is quite small. I do not use JQueryUI and would rather avoid this, since I will not use it for anything else.

Answer 1

This plugin looks promising: SimpleModal (abbreviated 9.6KB)

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 can 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 link below.

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