黑色弹框样式

<div class="login-button">
    <button id="login"> 登录</button>
</div>
<div class="overCurtain"></div>


<div class="hide-center">
    <div id="formhead">
        <div id="formhead-title">
            User Login
        </div>
        <button type="button" id="close">X</button>
    </div>
    <div id="formbody">
        <div class="loginUserName">
            <input id="input-topright-loginInput" name="userName" class="loginInput" placeholder="userName" type="text" value="admin">
        </div>
        <div class="loginPassword">
            <input id="input-bottomright-loginInput" name="password" class="loginInput" placeholder="password" type="password" style="border-bottom-right-radius:5px;">
        </div>
        <div id="formfoot">
            <button id="BSignIn" type="submit">Sign In</button>
        </div>
    </div>

</div>

css样式

.overCurtain {
border-top:1px solid rgb(230,245,255);
position:absolute;
height:674px;
width:100%;
left:0px;
top:0px;
opacity:0.7;
display:none;
background-color:rgb(230,245,255);
}
.hide-center {
width:308px;
height:300px;
position:absolute;
right:0;
left:0;
bottom:0;
top:0;
margin:auto;
display:none;
z-index:1;
}
.hide-center #formhead {
width:300px;
height:42px;
margin:0;
padding-top:12px;
padding-bottom:-30px;
border-top-left-radius:10px;
border-top-right-radius:10px;
background-color:#101010;
}
.hide-center #formhead-title {
width:100px;
height:24px;
margin-left:106px;
margin-right:36px;
color:#bfbfbf;
font-weight:900;
display:inline-block;
}
.hide-center #close {
width:35px;
height:20px;
border:0;
border-radius:20%;
background-color:red;
color:white;
display:inline-block;
}
.hide-center #formbody {
width:300px;
height:245px;
background-color:#1e1e1e;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
.hide-center .loginHead {
margin-right:-8px;
padding:13px;
width:25px;
height:28px;
background-color:#141414;
vertical-align:middle;
}
.hide-center .loginInput {
height:52px;
width:230px;
padding-left:10px;
border:0;
background-color:#141414;
color:aliceblue;
}
.hide-center .loginUserName {
padding-left:30px;
padding-top:30px;
}
.hide-center .login1 #img-topleft-loginHead {
border-top-left-radius:5px;
}
.hide-center .login1 #input-topright-loginInput {
border-top-right-radius:5px;
}
.hide-center .login1 #img-bottomleft-loginHead {
border-bottom-left-radius:5px;
}
.hide-center .login1 #input-bottomright-loginInput {
border-bottom-right-radius:5px;
}
.hide-center .loginPassword {
padding-left:30px;
}
.hide-center #formfoot {
margin-top:30px;
margin-left:30px;
}
.hide-center #BSignIn {
border:0;
background:#329d90;
color:#ffffff;
width:240px;
height:40px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}

js交互

$("#login").click(function () {
    $(".hide-center").fadeIn("slow");
    $(".overCurtain").fadeIn("slow");
})
$("#close").click(function () {
    $(".hide-center").fadeOut("slow")
    $(".overCurtain").fadeOut("slow")
})