JavaScript - modal window with given html

Question

Hi guys, how can I open a modal window using javascript only. I can't use own html-file so I have to pass html-data directly to method which will show window. Could you help me with this?

---

upd: I can't use any own library.

Answer 1

Plenty of simple javascript libraries out there to do this sort of thing. Thickbox is pretty cool.

Answer 2

Try a jQuery "lightbox-style" plugin. My favourite is ColorBox which does what you require. Example:

$.fn.colorbox({html:'<p>Hello</p>'});

Answer 3

Links found on google (only partially) related to the question that show this issue is not unique. They have not been reviewed.

http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/

http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

http://javascript.about.com/library/blmodald3.htm

http://www.digitalmediaminute.com/article/2021/css-and-javascript-modal-dialogs

http://okonet.ru/projects/modalbox/

http://msdn.microsoft.com/en-us/magazine/cc164247.aspx

Answer 4

Library-less solution:

Make a div filled with content, style it so that it floats over your content and has display:hidden on page load. With javascript set myDialog.style.display = 'block' and behold your modal.

This javascript may also add a background element that is styled to be translucent and to span the entire screen height and width, and blocks interaction to the page element under it.

In concept it's pretty simple really. It's more CSS than JS, and the logic is simply showing/hiding the modal dialog element.

And there is lots of edge case improvement you can do with animating the element in, sizing it to fit content better, etc. This is the sort of polish the libraries give you.