Opening html modal dialog

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 ar开发者_C百科ea 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">

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

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 e.g. this list for JQUery based dialog windows.

use http://jquery.com/demo/thickbox/ instead of Modal Popups, Modal popups will not work in FF.

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.