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;
    }

用js和教程显示POPUP：

http://www.zurb.com/playground/reveal-modal-plugin

当我添加一些 blablabla 文本时，它不会发生，那么是什么导致这种情况发生？

谢谢

4

1 回答 1

0

想出了如何解决这个问题。

在reveal.js 中添加diplay:none; 到关闭功能。

像这样。

//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');
        });
于 2013-04-24T21:50:16.773 回答