Блог

Главная - Вопросы по программированию - Bootstrap modal открывает другой раздел модального

Bootstrap modal открывает другой раздел модального

#css #html #twitter-bootstrap #bootstrap-modal

#css #HTML #twitter-bootstrap #bootstrap-модальный

Вопрос:

Рассмотрим следующее:

У меня есть 2 кнопки: логин btn и кнопка регистрации. При нажатии любой из кнопок появляется bootstrap modal с 2 вкладками, одна для входа в систему и одна для регистрации.

Моя проблема

Независимо от того, нажата ли кнопка входа или кнопка регистрации, модальный всегда открывается на вкладке входа, если пользователь нажимает кнопку регистрации, я бы хотел, чтобы модальный открывался на вкладке регистрации.

ССЫЛКА НА JSFIDDLE, НАЖМИТЕ ЗДЕСЬ

Вот наглядный пример:

  1. Две кнопки, пользователь нажимает кнопку bootstrap modal открывается

введите описание изображения здесь

  1. Bootstrap Modal открывается на вкладке login, раздел

введите описание изображения здесь

  1. Если пользователь нажимает кнопку регистрации, модал по-прежнему открывается в разделе вкладки входа в систему, я бы хотел, чтобы это изменилось, поэтому модал открывается на вкладке регистрации при нажатии кнопки регистрации

введите описание изображения здесь

Кнопки кода:

 <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">
                    amp;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>

Комментарии:

1. можете ли вы просто использовать один модальный и использовать вкладки для входа и регистрации? Я думаю, это более уместно.

2. @NelsonTan У меня есть только 1 модальный, с переключаемыми вкладками для входа и регистрации

3. Не могли бы вы включить скрипку, чтобы мы могли увидеть проблему?

4. Да, извините за это, позвольте мне это настроить

5. Итак, когда нажата кнопка register, вкладка register должна быть активной? это то, что вы ищете?

Ответ №1:

Вы можете использовать jquery, чтобы получить этот подход, просто измените свой css-код для 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 /