2012-10-03 49 views
0

我添加了一個彈出窗口,讓我的登錄按鈕,所以當你點擊它,它會打開一個登錄形式,包括一些HTML5標籤,如彈出窗口。當關閉顯示模式與形式,一些線下叉,然後消失

http://justxp.plutohost.net/slyfiles/index.html

當你點擊登錄,一切工作正常,但是當你關閉登陸,部分內容停留,然後消失了真正的快速。

事情是這樣的:

http://puu.sh/1b7HB

我該如何解決這個問題?

我的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">&#215;</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,它不會發生,那麼是什麼導致了這種情況發生?

感謝

回答

0

想出如何解決這個問題。

在reveal.js

添加diplay:無;到關閉功能。

這樣子。

//Closing Animation 
     modal.bind('reveal:close', function() { 
      if(!locked) { 
       lockModal(); 
       if(options.animation == "fadeAndPop") { 
        modalBG.delay(options.animationspeed).fadeOut(options.animationspeed); 
        modal.animate({ 
         "top": $(document).scrollTop()-topOffset + 'px', 
         "opacity" : 0 
        }, options.animationspeed/2, function() { 
         //on the line below add 'display' : 'none' 
         modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden', 'display' : 'none'}); 
         unlockModal(); 
        });     
       } 
       if(options.animation == "fade") { 
        modalBG.delay(options.animationspeed).fadeOut(options.animationspeed); 
        modal.animate({ 
         "opacity" : 0 
        }, options.animationspeed, function() { 
         modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure}); 
         unlockModal(); 
        });     
       } 
       if(options.animation == "none") { 
        modal.css({'visibility' : 'hidden', 'top' : topMeasure}); 
        modalBG.css({'display' : 'none'}); 
       }  
      } 
      modal.unbind('reveal:close'); 
     }); 
相關問題