opening a fixed window on 'onclick' event - javascript & html

Question

I know that there is some manner to show a new window, fixed on screen, while another part of site gonna disable and on under of a dark and transparent cover. But I do not know these ways and techniques names. So I write my own codes to create something like them. My question is, what is the common method for doing this? here is my code...

<!DOCTYPE HTML>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="bg_cover">
</div>
<div id="inside_box">
</div>
<div>
    <form>
        <label>
            <input type="button" value="run" onclick="sign_go()">
        </label>
    </form>
</div>
<script>
    function sign_go() {
        document.getElementById('bg_cover').style='z-index:80; background-color:#003399; position:fixed; top:0; left:0; height:100%; width:100%; opacity:0.5;';
        document.getElementById('inside_box').style='z-index:90; background-color:white; position:fixed; left:0; right:0; height:100px; width:300px; margin:auto; margin-top:100px;';
        document.getElementById('inside_box').innerHTML='<form><label><input type="text"><input type="button" onclick="sign_back()"></label></form>';
     }
    function sign_back(){
        document.getElementById('bg_cover').style='';
        document.getElementById('inside_box').style='';
        document.getElementById('inside_box').innerHTML='';
    }
</script>
</html>

try searching for jquery modal

Sushil
– Sushil

2015-05-26 21:11:33 +00:00
Commented May 26, 2015 at 21:11 — Sushil
– Sushil, Commented May 26, 2015 at 21:11

Samurai · Accepted Answer · 2015-05-26 21:35:56Z

First, you'll need a fixed element to cover the whole page and be transparent with a higher z-index and display: none;, the content will go inside. So it'll look like:

<div id="center_container">
    <div id="center">
        <div>Some content</div>
        <span id="close_center">X</span>
    </div>
</div>

#center will hold the contents here and #center_container just cover the page.

#center_container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: rgba(128, 128, 128, 0.5); /* transparency */
    z-index: 20;
}
#center {
    position: relative;
    margin: 50px auto;
    border-radius: 10px;
}
#close_center {
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: pointer;
}

And then on a button click you show it and set close button to close it.

jsfiddle DEMO

General Grievance · Accepted Answer · 2025-05-14 18:37:23Z

1

The thing you are looking for is called modal. You can create it using jQuery or pure CSS. Check out below article to create model.

Check out this article to create jQuery Modal

edited May 14 at 18:37

General Grievance

5,12039 gold badges40 silver badges60 bronze badges

answered May 26, 2015 at 21:29

Nakib

4,7337 gold badges26 silver badges46 bronze badges

Collectives™ on Stack Overflow

opening a fixed window on 'onclick' event - javascript & html

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related