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

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>

Solution

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