Question

我用引导程序制作模态。我是Web Engineering的新手，需要一些帮助。我的模态应该有两个动态标签，一个用于登录，另一个用于注册。我想在一个任务中使用两个概念，所以我使用动态标签和模态。

请告诉我其中的错误。登录标签工作正常，但是当我点击注册时，它会在固定的div下面显示注册凭据和上面的登录项，而不是像动态标签中那样覆盖它。

看起来像这样：Modal Image

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

Answer 1

你必须提供＆＃34; show＆＃34;或者＆＃34;隐藏＆＃34;模态函数内的参数。

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

//可选在按钮上单击隐藏模态

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

Answer 2

你将注册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之外：

我的登录模式工作不正常

2 个答案: