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