• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 474
  • Last Modified:

Modal Window Javascript

Looking for the most recent 'simple' Modal Window html Javascript that will work with Firefox and IE. Would like window to open over a 'greyed out' background and then close and return when clicked.
3 Solutions
RobinSoftware EngineerCommented:
There are a lot of these.

This one works on IE and FF: http://www.modalpopups.com
Here you have a standalone thing that has been tested with:

- Firefox 3.6: Mozilla/5.0, Gecko/20100115 Firefox/3.6
- Internet Explorer 8: 8.0.6001.1870CO
- Google Chrome:
- Opera 10.5: Opera/9.80 (...) Presto/2.5.22 Version/10.50
- Safari 4.0: 4.0.4 (531.21.10)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <title>Modal Dialog Box</title>
        <style type="text/css">
            table { border:1px solid black }
            td { border:1px solid silver }
            tr { border:1px solid blue }

            .bodyInModal_true { overflow:hidden }
            .bodyInModal_false { overflow:auto }
            .modalElement {} 

            #myCoverup { position:absolute;top:0px;left:0px; z-index:500;width:4000px;height:8000px; }
            .myCoverupEnabled_true {
                background-color:#E0E0E0; color:#E0E0E0;
                display:block; opacity: 0.7; filter:alpha(opacity=70); -moz-opacity:0.7; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70); -khtml-opacity: 0.7; 
                -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=70)”;
            .myCoverupEnabled_false { display:none }

            #myModalBox { z-index:1001; background-color:#FFFFFF; padding:20px; position:absolute; width:300px; height:100px; top:100px; left:100px; border:3px solid gray }
            .myModalBoxEnabled_false { display:none }
            .myModalBoxEnabled_true  { display:block }
        <script type="text/javascript">
            function disabledState(tagType,state) {
                var myCol = document.getElementsByTagName(tagType);
                if (myCol != null) {
                    for (var i = 0; i < myCol.length; i++) {
                        if ( myCol[i].className != 'modalElement' )
                            myCol[i].disabled = state;
                document.body.className = 'bodyInModal_' + state;
            function modalBoxEnable(state) {
                document.getElementById("myModalBox").className = 'myModalBoxEnabled_' + state;
                document.getElementById("myCoverup").className = 'myCoverup myCoverupEnabled_' + state;
                disabledState('button', state);
                disabledState('input', state);
        <div id="mainLayer" style="z-index:1">
            <button id="myButton" onclick="modalBoxEnable(true)">Modal Box</button>
            <table style="border:1px solid black">
                    <td><input id="input1" type="text" size="40" /></td>
                    <td><input id="input2" type="text" size="40" /></td>
                    <td><input id="input3" type="text" size="40" /></td>
        <div id="myCoverup" class="myCoverupEnabled_false">
        <div id="myModalBox" class="myModalBoxEnabled_false">
            Select something:
            <br /><br />
            <div style="padding-left:150px">
                <button class="modalElement" onclick="modalBoxEnable(false)">OK</button>
                <button class="modalElement" onclick="modalBoxEnable(false)">Cancel</button>

Open in new window


Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now