我的问题

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

JSFIDDLE LINK, CLICK HERE

这是一个直观的例子：

两个按钮，用户单击按钮Bootstrap Modal Opens

Bootstrap Modal在登录选项卡上打开，部分

如果用户点击注册按钮，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>

Answer 1

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

即可

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

Bootstrap模态打开模态的不同部分

我的问题

1 个答案: