我的登录模式工作不正确

我正在用引导程序制作一个模态。我是网络工程的新手，需要一些帮助。我的模式应该有两个动态选项卡，一个用于登录，一个用于注册。我想在一个任务中使用两个概念，所以我使用动态选项卡和模态。

请让我知道其中出了什么问题。登录选项卡工作正常，但是当我单击注册时，它会在固定的div下方显示注册凭据，并在上方显示登录项，而不是像在动态选项卡中那样覆盖它。

它看起来像这样：模态图像

  <style>
  .modal-header, h4, .close {
      background-color: #5cb85c;
      color:white !important;
      text-align: center;
      font-size: 30px;
  }
  .modal-footer {
      background-color: #f9f9f9;
  }
  </style>
</head>
<body>

<div class="container">
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
      <!-- Modal content-->
      <div class="modal-content">
       <div class="modal-dialog">
        <div class="modal-header" style="padding:35px 50px;">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
        </div>
                <div class="bs-example bs-example-tabs">
                <ul id="myTab" class="nav nav-tabs">
                  <li class="active"><a href="#signin" data-toggle="tab">Sign In</a></li>
                  <li class=""><a href="#signup" data-toggle="tab">Register</a></li>
                </ul>
            </div>
               <div class="imgcontainer">
      <img src="img_avatar2.png" alt="Avatar" class="avatar" style="height:200px; width:200px; align:center; margin-left: 220px">
    </div>
        <div class="modal-body" style="padding:40px 50px;">
      <div class="tab-pane fade active in" id="signin">
      <form role="form">
            <div class="form-group">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
              <input type="text" class="form-control" id="usrname" placeholder="Enter email">
            </div>
            <div class="form-group">
              <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
              <input type="text" class="form-control" id="psw" placeholder="Enter password">
            </div>
            <div class="checkbox">
              <label><input type="checkbox" value="" checked>Remember me</label>
            </div>
           <!-- Login button-->
           <div class="control-group">
                  <label class="control-label" for="signin"></label>
                  <div class="controls">
              <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
         </div></div>
                 </form>
               <div class="modal-footer">
          <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
          <p>Not a member? <a href="#">Sign Up</a></p>
          <p>Forgot <a href="#">Password?</a></p>
        </div>
      <!-- MODAL SIGN UP-->
       <div class="tab-pane fade" id="signup">
        <form role="form">
            <div class="form-group">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
              <input type="text" class="form-control" id="usrname" placeholder="Enter email">
            </div>
            <div class="form-group">
              <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
              <input type="text" class="form-control" id="psw" placeholder="Enter password">
            </div>
            <div class="checkbox">
              <label><input type="checkbox" value="" checked>Remember me</label>
            </div>
             <div class="control-group">
                  <label class="control-label" for="reenterpassword">Re-Enter Password:</label>
                  <div class="controls">
                    <input id="reenterpassword" class="form-control" name="reenterpassword" type="password" placeholder="********" class="input-large" required="">
                  </div>
                </div>
             <div class="control-group">
                  <label class="control-label" for="humancheck">Humanity Check:</label>
                  <div class="controls">
                    <label class="radio inline" for="humancheck-0">
                      <input type="radio" name="humancheck" id="humancheck-0" value="robot" checked="checked">I'm a Robot</label>
                    <label class="radio inline" for="humancheck-1">
                      <input type="radio" name="humancheck" id="humancheck-1" value="human">I'm Human</label>
                  </div>
                </div>
                            <!-- Button -->
                <div class="control-group">
                  <label class="control-label" for="confirmsignup"></label>
                  <div class="controls">
                    <button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign Up</button>
                  </div>
                </div>
                   </div>
        </div>
      </div>
    </div>
       </form>
       </div>

      </div>
        </div>

      </div>
    </div>
  </div>
</div>
<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myModal").modal();
    });
});
</script>
</body>
</html>

您将注册div放在签名div中：

<div class="modal-body" style="padding:40px 50px;">
      <div class="tab-pane fade" id="signup">
        <form role="form">
            <div class="form-group">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
              <input type="text" class="form-control" id="usrname" placeholder="Enter email">
            </div>
            <div class="form-group">
              <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
              <input type="text" class="form-control" id="psw" placeholder="Enter password">
            </div>
            <div class="checkbox">
              <label><input type="checkbox" value="" checked="">Remember me</label>
            </div>
             <div class="control-group">
                  <label class="control-label" for="reenterpassword">Re-Enter Password:</label>
                  <div class="controls">
                    <input id="reenterpassword" class="form-control" name="reenterpassword" type="password" placeholder="********" required="">
                  </div>
                </div>
             <div class="control-group">
                  <label class="control-label" for="humancheck">Humanity Check:</label>
                  <div class="controls">
                    <label class="radio inline" for="humancheck-0">
                      <input type="radio" name="humancheck" id="humancheck-0" value="robot" checked="checked">I'm a Robot</label>
                    <label class="radio inline" for="humancheck-1">
                      <input type="radio" name="humancheck" id="humancheck-1" value="human">I'm Human</label>
                  </div>
                </div>
                            <!-- Button -->
                <div class="control-group">
                  <label class="control-label" for="confirmsignup"></label>
                  <div class="controls">
                    <button id="confirmsignup" name="confirmsignup" class="btn btn-success">Sign Up</button>
                  </div>
                </div>
                   </form></div><div class="tab-pane fade active in" id="signin">
      <form role="form">
            <div class="form-group">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
              <input type="text" class="form-control" id="usrname" placeholder="Enter email">
            </div>
            <div class="form-group">
              <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
              <input type="text" class="form-control" id="psw" placeholder="Enter password">
            </div>
            <div class="checkbox">
              <label><input type="checkbox" value="" checked="">Remember me</label>
            </div>
           <!-- Login button-->
           <div class="control-group">
                  <label class="control-label" for="signin"></label>
                  <div class="controls">
              <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
         </div></div>
                 </form>
               <div class="modal-footer">
          <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
          <p>Not a member? <a href="#">Sign Up</a></p>
          <p>Forgot <a href="#">Password?</a></p>
        </div>
      <!-- MODAL SIGN UP-->
        </div>
      </div>

您需要将注册div 放在签名div 之外：

您必须在模态函数中提供"show"或"hide"参数。

<script>
$(document).ready(function(){
    $("#myBtn").click(function(){
        $("#myModal").modal("show");
    });
});
</script>

//自选单击按钮时隐藏模式

$("#myModal").modal("hide");

相关内容

最新更新

热门标签：