[已经解决,里面有解决代码]登录框注册框的问题,打开登录框,在登录框的板面上点击去注册,打开注册框,但登录框依然在,没有关闭掉
登录框注册框的问题,打开登录框,在登录框的板面上点击去注册,打开注册框,但登录框依然在,没有关闭掉。相关代码在附件
{{{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录注册</title>
<link rel="stylesheet" type="text/css" href="http://wenda.bootcss.com/css/main.css">
<link href="http://wenda.bootcss.com/css/component.css" rel="stylesheet">
<style>
/* CSS Document */
.toolbar-item,
.toolbar-layer {
background: url(../img/toolbar.png) no-repeat;
}
.toolbar {
position: fixed;
right: 5px;
bottom: 5px;
}
footer[role="contentinfo"] .toolbar a {
color: #fff;
}
/假设网页宽度为1200px,导航条在右侧悬浮/
.toolbar-item {
display: block;
width: 40px;
height: 40px;
margin-top: 1px;
position: relative;
-moz-transition: background-position 1s;
-ms-transition: background-position 1s;
-o-moz-transition: background-position 1s;
-webkit-moz-transition: background-position 1s;
transition: background-position 1s;
}
.black-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .3);
z-index: 99998;
}
#login_frame {
width: 520px;
background: #fff;
position: fixed;
top: 50%;
left: 50%;
margin: -155px 0 0 -260px;
text-align: center;
padding: 30px 0 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
border-radius: 0px;
}
#login_frame .sign-up {
margin-top: 30px;
}
#login_frame .holder {
width: 300px;
margin: 0 auto;
position: relative;
}
#login_frame .with-line {
font-size: 16px;
color: #999;
margin: 0 auto;
position: relative;
text-align: center;
}
#login_frame .sign-up .buttons {
margin: 20px 0 20px -15px;
width: 336px;
text-align: center;
}
#login_frame .sign-up .buttons a {
margin-right: 10px;
}
#login_frame .buttons a {
display: inline-block;
margin-right: 5px;
width: 40px;
height: 40px;
<!-- background: url(img/login_icons_small.svg) 0 0 no-repeat;
-->
}
#login_frame .buttons a.qzone {
background-position: -80px 0;
}
.buttons a.wechat {
background-position: -320px 0;
}
#login_frame .buttons a.douban {
background-position: -160px 0;
}
#login_frame .switch-email-signup {
font-size: 16px;
margin-bottom: 50px;
display: block;
}
#login_frame a {
cursor: pointer;
}
.brown-link {
color: #9E7E6B;
}
#login_frame .sign-up .switch {
position: absolute;
right: 20px;
bottom: 20px;
}
#login_frame .login .holder {
margin-top: 20px;
}
#login_frame .with-line:before {
content: "";
border-top: 1px solid #ededed;
display: block;
position: absolute;
width: 50px;
top: 8px;
left: 0;
}
#login_frame .login .buttons {
margin: 10px 0 15px;
}
#login_frame .buttons.small a {
<!-- background-image: url(img/login_icons_tiny.svg);
-->width: 40px;
height: 40px;
}
#login_frame .buttons.small a.wechat {
background-position: -160px 0;
}
#login_frame .buttons.small a.douban {
background-position: -240px 0;
}
#login_frame .buttons.small a.renren {
background-position: -320px 0;
}
#login_frame .login .mail-login {
margin-top: 15px;
}
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
resize: none;
outline: 0;
}
#login_frame .login .mail-login .clear-input {
margin-bottom: 10px;
}
#login_frame .clear-input {
box-sizing: border-box;
width: 100%;
}
.clear-input {
display: inline-block;
padding: 0 10px;
height: 36px;
font-size: 16px;
line-height: 1;
color: #777;
background: #FCFCFC;
border: 1px solid #CCC;
border-radius: 0px;
width: 250px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05);
-webkit-transition: color .2s linear, border-color .3s linear;
}
#login_frame .with-line:after {
content: "";
border-top: 1px solid #ededed;
display: block;
position: absolute;
width: 50px;
top: 8px;
right: 0;
}
#login_frame .login .mail-login .btn {
display: block;
}
.btn18 {
font-size: 18px;
padding: 0 15px;
border-radius: 0px;
height: 36px;
line-height: 36px;
}
.rbtn {
background: #1AB2E8;
background: linear-gradient( #1AB2E8, #1473E6);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 0 rgba(255, 255, 255, .3);
text-shadow: 0 -1px 0 rgba(0, 0, 0, .1);
color: #fff;
border: 1px solid #00A2E8;
}
#login_frame .login .reset-password {
position: absolute;
left: 0;
bottom: 0;
}
.red-link {
color: #1473E6;
}
#login_frame .login .switch-back {
text-align: right;
margin: 10px 0;
}
#login_frame .reset .holder {
margin-top: 30px;
}
#login_frame .reset .reset-form {
margin: 10px 0;
}
#login_frame .reset .clear-input {
margin-bottom: 10px;
}
#login_frame .reset .back {
text-align: left;
display: block;
}
#login_frame .email-signup .signup-success {
margin-top: 30px;
width: 450px;
margin: 30px auto 0;
}
#login_frame .email-signup .signup-success .with-line {
font-size: 18px;
color: #444;
}
#login_frame .email-signup .signup-success .text {
margin: 20px -30px 0;
line-height: 20px;
}
#login_frame .email-signup .signup-success .text .email {
color: #2FC2EF;
padding: 0 3px;
}
#login_frame .email-signup .signup-success .text a {
padding: 0 3px;
}
#login_frame .email-signup .signup-success .resend.disabled {
color: #999;
}
#login_frame .email-signup .signup-success .login-link {
display: block;
margin-top: 30px;
}
#login_frame .email-signup .holder {
margin-top: 20px;
}
#login_frame .email-signup .signup-form form {
margin-top: 15px;
}
#login_frame .email-signup .signup-form form .clear-input {
margin-bottom: 10px;
}
#login_frame .email-signup .signup-form form .captcha,
#login_frame .reset-form .captcha {
width: 290px;
margin-bottom: 10px;
}
#login_frame .email-signup .signup-form .email-signup-back {
display: block;
text-align: left;
margin: 15px 0 10px;
}
#login_frame .close {
width: 36px;
height: 36px;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
}
#login_frame .close i {
width: 20px;
height: 20px;
position: absolute;
left: 50%;
top: 50%;
margin: -10px 0 0 -10px;
background: url(img/msg_close.png) 0 0 no-repeat;
}
.clear {
clear: both;
}
#page_overlay {
background: rgba(246, 244, 245, .84);
}
a,
{
text-decoration: none;
color: #1473E6;
outline: none;
}
@media (max-width: 399px) {
#login_frame {
width: 320px;
background: #fff;
position: fixed;
top: 52%;
left: 82%;
margin: -155px 0 0 -260px;
text-align: center;
padding: 30px 0 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
border-radius: 0px;
}
}
@media (min-width: 400px) and (max-width: 550px) {
#login_frame {
width: 400px;
background: #fff;
position: fixed;
top: 66%;
left: 62%;
margin: -155px 0 0 -260px;
text-align: center;
padding: 30px 0 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
border-radius: 0px;
}
#login_frame .login .buttons {
margin: 5px 0 10px;
}
#login_frame .login .holder {
margin-top: 10px;
}
#login_frame .login .mail-login {
margin-top: 1px;
}
#login_frame .with-line {
font-size: 12px;
}
#login_frame .switch-email-signup {
font-size: 12px;
margin-bottom: 50px;
display: block;
}
.clear-input {
display: inline-block;
padding: 0 10px;
height: 26px;
font-size: 12px;
line-height: 1;
color: #777;
background: #FCFCFC;
border: 1px solid #CCC;
border-radius: 0px;
width: 150px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05);
-webkit-transition: color .2s linear, border-color .3s linear;
}
btn18 {
font-size: 14px;
padding: 0 15px;
border-radius: 0px;
height: 26px;
line-height: 26px;
}
#login_frame .email-signup .signup-success .with-line {
font-size: 14px;
color: #444;
}
.btn18 {
font-size: 16px;
padding: 0 15px;
border-radius: 0px;
height: 26px;
line-height: 26px;
}
}
@media (min-width: 551px) and (max-width: 767px) {
#login_frame {
width: 400px;
background: #fff;
position: fixed;
top: 58%;
left: 62%;
margin: -155px 0 0 -260px;
text-align: center;
padding: 30px 0 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
border-radius: 0px;
}
#login_frame .login .buttons {
margin: 5px 0 10px;
}
#login_frame .login .holder {
margin-top: 10px;
}
#login_frame .login .mail-login {
margin-top: 1px;
}
</style>
</head>
<body>
</div>
<ul>
<li><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-1" title="登陆">
{{{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录注册</title>
<link rel="stylesheet" type="text/css" href="http://wenda.bootcss.com/css/main.css">
<link href="http://wenda.bootcss.com/css/component.css" rel="stylesheet">
<style>
/* CSS Document */
.toolbar-item,
.toolbar-layer {
background: url(../img/toolbar.png) no-repeat;
}
.toolbar {
position: fixed;
right: 5px;
bottom: 5px;
}
footer[role="contentinfo"] .toolbar a {
color: #fff;
}
/假设网页宽度为1200px,导航条在右侧悬浮/
.toolbar-item {
display: block;
width: 40px;
height: 40px;
margin-top: 1px;
position: relative;
-moz-transition: background-position 1s;
-ms-transition: background-position 1s;
-o-moz-transition: background-position 1s;
-webkit-moz-transition: background-position 1s;
transition: background-position 1s;
}
.black-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .3);
z-index: 99998;
}
#login_frame {
width: 520px;
background: #fff;
position: fixed;
top: 50%;
left: 50%;
margin: -155px 0 0 -260px;
text-align: center;
padding: 30px 0 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
border-radius: 0px;
}
#login_frame .sign-up {
margin-top: 30px;
}
#login_frame .holder {
width: 300px;
margin: 0 auto;
position: relative;
}
#login_frame .with-line {
font-size: 16px;
color: #999;
margin: 0 auto;
position: relative;
text-align: center;
}
#login_frame .sign-up .buttons {
margin: 20px 0 20px -15px;
width: 336px;
text-align: center;
}
#login_frame .sign-up .buttons a {
margin-right: 10px;
}
#login_frame .buttons a {
display: inline-block;
margin-right: 5px;
width: 40px;
height: 40px;
<!-- background: url(img/login_icons_small.svg) 0 0 no-repeat;
-->
}
#login_frame .buttons a.qzone {
background-position: -80px 0;
}
.buttons a.wechat {
background-position: -320px 0;
}
#login_frame .buttons a.douban {
background-position: -160px 0;
}
#login_frame .switch-email-signup {
font-size: 16px;
margin-bottom: 50px;
display: block;
}
#login_frame a {
cursor: pointer;
}
.brown-link {
color: #9E7E6B;
}
#login_frame .sign-up .switch {
position: absolute;
right: 20px;
bottom: 20px;
}
#login_frame .login .holder {
margin-top: 20px;
}
#login_frame .with-line:before {
content: "";
border-top: 1px solid #ededed;
display: block;
position: absolute;
width: 50px;
top: 8px;
left: 0;
}
#login_frame .login .buttons {
margin: 10px 0 15px;
}
#login_frame .buttons.small a {
<!-- background-image: url(img/login_icons_tiny.svg);
-->width: 40px;
height: 40px;
}
#login_frame .buttons.small a.wechat {
background-position: -160px 0;
}
#login_frame .buttons.small a.douban {
background-position: -240px 0;
}
#login_frame .buttons.small a.renren {
background-position: -320px 0;
}
#login_frame .login .mail-login {
margin-top: 15px;
}
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
resize: none;
outline: 0;
}
#login_frame .login .mail-login .clear-input {
margin-bottom: 10px;
}
#login_frame .clear-input {
box-sizing: border-box;
width: 100%;
}
.clear-input {
display: inline-block;
padding: 0 10px;
height: 36px;
font-size: 16px;
line-height: 1;
color: #777;
background: #FCFCFC;
border: 1px solid #CCC;
border-radius: 0px;
width: 250px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05);
-webkit-transition: color .2s linear, border-color .3s linear;
}
#login_frame .with-line:after {
content: "";
border-top: 1px solid #ededed;
display: block;
position: absolute;
width: 50px;
top: 8px;
right: 0;
}
#login_frame .login .mail-login .btn {
display: block;
}
.btn18 {
font-size: 18px;
padding: 0 15px;
border-radius: 0px;
height: 36px;
line-height: 36px;
}
.rbtn {
background: #1AB2E8;
background: linear-gradient( #1AB2E8, #1473E6);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 0 rgba(255, 255, 255, .3);
text-shadow: 0 -1px 0 rgba(0, 0, 0, .1);
color: #fff;
border: 1px solid #00A2E8;
}
#login_frame .login .reset-password {
position: absolute;
left: 0;
bottom: 0;
}
.red-link {
color: #1473E6;
}
#login_frame .login .switch-back {
text-align: right;
margin: 10px 0;
}
#login_frame .reset .holder {
margin-top: 30px;
}
#login_frame .reset .reset-form {
margin: 10px 0;
}
#login_frame .reset .clear-input {
margin-bottom: 10px;
}
#login_frame .reset .back {
text-align: left;
display: block;
}
#login_frame .email-signup .signup-success {
margin-top: 30px;
width: 450px;
margin: 30px auto 0;
}
#login_frame .email-signup .signup-success .with-line {
font-size: 18px;
color: #444;
}
#login_frame .email-signup .signup-success .text {
margin: 20px -30px 0;
line-height: 20px;
}
#login_frame .email-signup .signup-success .text .email {
color: #2FC2EF;
padding: 0 3px;
}
#login_frame .email-signup .signup-success .text a {
padding: 0 3px;
}
#login_frame .email-signup .signup-success .resend.disabled {
color: #999;
}
#login_frame .email-signup .signup-success .login-link {
display: block;
margin-top: 30px;
}
#login_frame .email-signup .holder {
margin-top: 20px;
}
#login_frame .email-signup .signup-form form {
margin-top: 15px;
}
#login_frame .email-signup .signup-form form .clear-input {
margin-bottom: 10px;
}
#login_frame .email-signup .signup-form form .captcha,
#login_frame .reset-form .captcha {
width: 290px;
margin-bottom: 10px;
}
#login_frame .email-signup .signup-form .email-signup-back {
display: block;
text-align: left;
margin: 15px 0 10px;
}
#login_frame .close {
width: 36px;
height: 36px;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
}
#login_frame .close i {
width: 20px;
height: 20px;
position: absolute;
left: 50%;
top: 50%;
margin: -10px 0 0 -10px;
background: url(img/msg_close.png) 0 0 no-repeat;
}
.clear {
clear: both;
}
#page_overlay {
background: rgba(246, 244, 245, .84);
}
a,
{
text-decoration: none;
color: #1473E6;
outline: none;
}
@media (max-width: 399px) {
#login_frame {
width: 320px;
background: #fff;
position: fixed;
top: 52%;
left: 82%;
margin: -155px 0 0 -260px;
text-align: center;
padding: 30px 0 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
border-radius: 0px;
}
}
@media (min-width: 400px) and (max-width: 550px) {
#login_frame {
width: 400px;
background: #fff;
position: fixed;
top: 66%;
left: 62%;
margin: -155px 0 0 -260px;
text-align: center;
padding: 30px 0 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
border-radius: 0px;
}
#login_frame .login .buttons {
margin: 5px 0 10px;
}
#login_frame .login .holder {
margin-top: 10px;
}
#login_frame .login .mail-login {
margin-top: 1px;
}
#login_frame .with-line {
font-size: 12px;
}
#login_frame .switch-email-signup {
font-size: 12px;
margin-bottom: 50px;
display: block;
}
.clear-input {
display: inline-block;
padding: 0 10px;
height: 26px;
font-size: 12px;
line-height: 1;
color: #777;
background: #FCFCFC;
border: 1px solid #CCC;
border-radius: 0px;
width: 150px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05);
-webkit-transition: color .2s linear, border-color .3s linear;
}
btn18 {
font-size: 14px;
padding: 0 15px;
border-radius: 0px;
height: 26px;
line-height: 26px;
}
#login_frame .email-signup .signup-success .with-line {
font-size: 14px;
color: #444;
}
.btn18 {
font-size: 16px;
padding: 0 15px;
border-radius: 0px;
height: 26px;
line-height: 26px;
}
}
@media (min-width: 551px) and (max-width: 767px) {
#login_frame {
width: 400px;
background: #fff;
position: fixed;
top: 58%;
left: 62%;
margin: -155px 0 0 -260px;
text-align: center;
padding: 30px 0 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
border-radius: 0px;
}
#login_frame .login .buttons {
margin: 5px 0 10px;
}
#login_frame .login .holder {
margin-top: 10px;
}
#login_frame .login .mail-login {
margin-top: 1px;
}
</style>
</head>
<body>
</div>
<ul>
<li><a href="javascript:;" class="md-trigger btn btn-primary btn-sm" data-modal="modal-1" title="登陆">