Click on the button to eject the customizable small frame is the realization of modal window

Click on the button to eject the customizable small frame is the realization of modal window

A recent project to achieve a function, when clicked on the new Item button, pop-up a bomb box, to fill out the project name, create a team, and then submit, when the frame appears, the background is dark, and click Invalid. The
first thing I thought of about this feature was the alert () or window.open () method, but none of these methods implemented this function, so I used two div to implement it. A large div for div_black, as a background div, there is a div_iterm, used to implement the contents of the bomb frame

    <div class= "Div_black" id= "Div_black" ></div>
    <div class= "div_iterm" id= "Div_iterm" >
        < Label> Project name </label>
        <input class= "Iterm_name"/><br/>
        <label> team name </label >
        <input class= "team_name"/><br/> <button class= "btn" id= "submit_btn" >submit</
        button>
        <button class= "btn" id= "close_btn" >close</button>
    </div>
    <button Id= "Creat_iterm" >creat</button>

Next is the definition of the two div style, this is the key to achieve the effect of the window, to be set to absolute positioning, and then set the Z-index to the top of the frame.

. div_black{
    Display:none;
    width:100%;
    height:100%;
    Position:absolute;
    top:0;
    left:0;
    z-index:1000;
    Background:rgba (0,0,0,0.6);
div_iterm{
    Display:none;
    width:50%;
    Position:absolute;
    top:150px;
    left:25%;
    z-index:1001;
}

Then you bind the event to the button, first of all, click on the creat button pop-up frame, and then fill out, click the Submit button or close the button to put up the frame, pay attention to the box after the play to clear the form to fill out the content, taking into account that if you fill in more content, then you can use each () function to traverse the contents of each input setting is empty.

    $ (' #creat_iterm '). Bind (' click ', Function () {
        $ (' #div_black '). CSS (' Display ', ' block ');
        $ (' #div_iterm '). CSS (' Display ', ' block ');
        $ (' #div_iterm input '). each (function () {
           $ (this). Val ("");
        });
    };
    $ (' #submit_btn '). Bind (' click ', Function () {
        $ (' #div_black '). CSS (' Display ', ' none ');
        $ (' #div_iterm '). CSS (' Display ', ' none ');
        The following can be requested from the server

    });

The above is my way to achieve the window, there are many plug-ins to achieve modal window. If any great God has a better way, please advise.