0
我添加了一個彈出窗口,讓我的登錄按鈕,所以當你點擊它,它會打開一個登錄形式,包括一些HTML5標籤,如彈出窗口。當關閉顯示模式與形式,一些線下叉,然後消失
http://justxp.plutohost.net/slyfiles/index.html
當你點擊登錄,一切工作正常,但是當你關閉登陸,部分內容停留,然後消失了真正的快速。
事情是這樣的:
我該如何解決這個問題?
我的HTML:
<a href="#" data-reveal-id="myModal">
<div class="delogin">
<div class="login">
<div id="lock"></div>
<span id="login">LOGIN</span>
</div>
</div>
</a>
<div id="myModal" class="reveal-modal">
<form class="form-horizontal" id="login" method='post' action='?do=login'>
<fieldset>
<legend>Login</legend><br />
<div class="alert alert-error">Are you sure you want to login? All of your registration data entered will be lost.</div>
<div class="control-group">
<label class="control-label" for="input01">Username</label>
<div class="controls">
<div class="input-prepend">
<input type="text" class="input" id="username" name="username">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Password</label>
<div class="controls">
<div class="input-prepend">
<input type="password" class="input" id="password" name="password">
</div>
<h6><a href="forgotpass.php"><b style="color: #518FDB;">Forgot your password?</b></a></h6>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01"></label>
<div class="controls">
<button type="submit" class="btn btn-inverse">Login</button>
</div>
</div>
</fieldset>
</form>
<a class="close-reveal-modal">×</a>
</div>
CSS
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: #000;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
top: 100px;
left: 50%;
margin-left: -300px;
width: 520px;
background: #eee url(modal-gloss.png) no-repeat -200px -80px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 22px;
line-height: .5;
position: absolute;
top: 8px;
right: 11px;
color: #aaa;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
}
顯示POPUP用js和教程:
http://www.zurb.com/playground/reveal-modal-plugin
當我添加一些文字blablabla,它不會發生,那麼是什麼導致了這種情況發生?
感謝