Bootstrap Modal 打开 Modal 的不同部分答案

【问题标题】：Bootstrap Modal Open Different Section Of ModalBootstrap Modal 打开 Modal 的不同部分
【发布时间】：2016-10-07 11:14:28
【问题描述】：

考虑以下几点：

我有 2 个按钮，一个登录按钮和一个注册按钮。单击任一按钮时，会出现一个引导模式，其中包含 2 个选项卡，一个用于登录，一个用于注册。

我的问题

无论是单击登录按钮还是注册按钮，模式总是在登录选项卡上打开，如果用户单击注册按钮，我希望模式在注册选项卡上打开。

JSFIDDLE LINK, CLICK HERE

这是一个视觉示例：

两个按钮，用户点击按钮 Bootstrap Modal 打开

引导模式在登录选项卡上打开，部分

如果用户单击注册按钮，模式仍然会在登录选项卡部分打开，我希望对此进行更改，因此当单击注册按钮时，模式会在注册选项卡上打开

代码按钮：

<div class="row">
        <div class="col-lg-6 col-md-6 col-sm-62 col-xs-6">
            <button type="button" data-toggle="modal" data-target="#myModal" style="cursor:pointer" id="loginBtn">Login</button>        
         </div><!--Columns-->
        <div class="col-lg-6 col-md-6 col-sm-62 col-xs-6">
         <!-- I BELIEVE THE PROBLEM IS HERE-->
            <button type="button"  data-toggle="modal" data-target="#myModal#registration" style="cursor:pointer" id="regBtn">Register</button>     
        </div><!--Columns-->
    </div><!--Row-->

模式代码

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;</button>
                <h4 class="modal-title" id="myModalLabel">
                    Login/Registration 
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-8" style="border-right: 1px dotted #C2C2C2;padding-right: 30px;">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#Login" data-toggle="tab">Login</a></li>
                            <li><a href="#Registration" data-toggle="tab">Registration</a></li>
                        </ul>
                        <!-- Tab panes -->
                        <!--LOGIN TAB -->
                        <div class="tab-content">
                            <div class="tab-pane active" id="Login">

      <form class="form-horizontal" role="form" method="post" id="tabLogin" action="includes/loginScript.php">
    <div class="form-group">
      <label class="control-label col-sm-2" for="email">Email:</label>
      <span id="email-info"></span>
      <div class="col-sm-10">
        <input type="email" name="email" class="form-control" id="email" placeholder="Enter email">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="pwd">Password:</label>
      <span id="pwd-info"></span>
      <div class="col-sm-10">          
        <input type="password" name="password" class="form-control" id="pwd" placeholder="Enter password">
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label><input type="checkbox"> Remember me</label>
        </div>
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>
     <!-- <a href="assets/forgotLoginDetails.php"><span style="color:red;">Forgot Password</span></a>-->
  </form>
    <div id="tabloginMsg"></div>
  <!--**********END LOGIN TAB*************** -->
                            </div>
                            <!--*************START REGISTRATION************************* -->

                            <div class="tab-pane" id="Registration">



 <form name="regForm" class="form-horizontal" role="form" id="regTab" action="includes/classes/class.userRegistration.php" method="post">
  <div class="form-group">
<label class="control-label col-sm-2" for="regName">Name:</label>
 <div class="col-sm-10">
<input type="text" name="userName" required  class="form-control">
</div>
</div>

 <div class="form-group">
<label class="control-label col-sm-2" for="regLastName">Surname:</label>
<div class="col-sm-10">  
<input type="text" name="userSurname" required  class="form-control">
</div>
</div>

<div class="form-group">
<label class="control-label col-sm-2" for="regEmail">Email:</label>
 <div class="col-sm-10">     
<input type="email" name="userEmail" required  class="form-control">
</div>
</div>

<div class="form-group">
<label class="control-label col-sm-2" for="regPword">Password:</label>
<div class="col-sm-10">   
<input type="password" name="pword1"  class="form-control">
</div>
</div>

 <div class="form-group">
<label class="control-label col-sm-2" for="confRegPword">Confirm Password:</label>
<div class="col-sm-10">   
<input type="password" name="pword2" class="form-control">
</div>
</div>
<div class="form-group">
 <label class="control-label col-sm-2" for="regPhone">Phone:</label>
<div class="col-sm-10">  
<input type="text" name="userPhone" class="form-control">
</div>
</div>

<div  class="form-group">
<div class="col-sm-10">
<button name="submit" class="btn btn-danger" style="font-size:19px" >Register</button>
</div>
</div>
</form>
<div id="tabregMsg"></div>
                            </div>
                        </div>
                        <div id="OR" class="hidden-xs">
                            OR</div>
                    </div>
                    <div class="col-md-4">
                        <div class="row text-center sign-with">
                            <div class="col-md-12">
                                <h4>
                                    Sign in with</h4>
                            </div>
                            <div class="col-md-12">
                                <div class="btn-group btn-group-justified">
                                      <a href="<?php echo $SITE_URL; ?>/fbconfig.php" class="btn btn-primary">Facebook</a> 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

您可以只使用一种模式并使用选项卡进行登录和注册吗？我觉得这样比较合适。
@NelsonTan 我只有 1 个模式，带有用于登录和注册的切换选项卡
您能否提供一个小提琴，以便我们查看问题？
是的，抱歉让我设置一下
那么当按钮注册时点击注册标签应该是活动的？这就是你要找的那个？

标签： css html twitter-bootstrap bootstrap-modal

【解决方案1】：

您可以使用 jquery 来获取此方法只需将 TAB 的 css 代码更改为

 <ul class="nav nav-tabs">
    <li id="loginLi"><a href="#Login" data-toggle="tab">Login</a></li>
    <li id="RegLi"><a href="#Registration" data-toggle="tab">Registration</a></li>
 </ul>

然后添加这个jQuery点击动作：

$("#loginBtn").on('click',function(){
     $('#RegLi').removeClass('active');
     $('#loginLi').addClass('active');
})
$("#regBtn").on('click',function(){
      $('#loginLi').removeClass('active');
      $('#RegLi').addClass('active');
})

您可以改进此代码，但最好选择正确的选项卡。

在此处查看演示：https://jsfiddle.net/j4pkru1a/

【讨论】：