Opening html modal dialog

Question

I need to get the contents below on a modal window. I had been trying this for a while today. On modal window opened the background body contents are not accessible and on reload page the modal popup should close down leaving the contents of the text area as it is.

<a href="" id="link">Open Popup</a>
<table>
    <tr width="10%">
        <td>
            <TEXTAREA name="text1" id="text1" rows="15" cols="65" onscroll="sync();" spellcheck="false"></TEXTAREA>
        </td>
        <td>
            <TEXTAREA Name="text2" id="text2" rows="15" cols="65"  spellcheck="false"></TEXTAREA>
        </td>
    </tr>
    <tr width="90%">
        <td></td>
    </tr>
</table>
<input type="button" value="Compile" onclick="stat('')"/>
<input type="button" value="Reload Page" onClick="window.location.href=window.location.href">

Answer 1

I guess you could try moodalbox . It uses mootools which is a javascript framework. It should be quicker and nicer than what you are trying to attempt. Just search modal html on Google should give you more choices :-)

Answer 2

Internet Explorer has a concept for opening Modal popup windows, but other browsers do not.

I think the easiest solution is to use a inline DIV oriented approach instead of a popup window.

There are many ready-made solutions avaliable, check out eg this list for JQUery based dialog windows.

Answer 3

使用http://jquery.com/demo/thickbox/代替Modal Popups，Modal popups在FF中不起作用。

Answer 4

You can simply use ModaliseJS which simplifies a lot the use of modals.

A modal consist on a hidden HTML element, which shows on certain actions.

Modalise is lightning fast and does not require any other library.