头像
简单的登录框弹出层
admin 发表于 2022-03-22 22:27:44

2323 1 1
<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>
.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;
}
$("#login").click(function () {
    $(".hide-center").fadeIn("slow");
    $(".overCurtain").fadeIn("slow");
})
$("#close").click(function () {
    $(".hide-center").fadeOut("slow")
    $(".overCurtain").fadeOut("slow")
})
──── 1人觉得很赞 ────
最新回复 (1)
  • 头像
    萌二代 发表于 2022-03-30 14:34:40
    0 引用 沙发
    看帖必回是好习惯!
    • 折腾BBS
      3
        登录 注册 QQ登录