modal content and tabs content bootstrap

223

24 апреля 2017, 03:40

На одной странице у меня находится tabs content, в котором в одной из вкладок есть кнопка, вызывающая modal content. Когда я нажимаю на кнопку, появляется modal и сразу пропадает tab с той вкладкой на которой была нажата кнопка. При закрытии modal, tab не возвращается. Через дебагер я вижу, что на tab наложился стиль display:none;.

Как этого избежать?

Еще если я вызываю окно через ссылку в таблице, которая в той же вкладке что и кнопка, то у меня вызывается modal большой(так и должно быть) и вместе с анимацией развертывания развертывается и tab. Табы переключаю без скриптов.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<ul class="nav nav-tabs" id="tab_view"> 
  <li class="active"><a href="#active_card" data-toggle="tab">Активные карточки</a></li> 
  <li><a href="#deactive" data-toggle="tab">Архив</a></li> 
  <li><a href="#statistics" data-toggle="tab">Статистика</a></li> 
</ul> 
<div class="tab-content" id="tab_viewContent"> 
  <div class="tab-pane active" id="active_card"> 
    <div class="form-group"> 
      <div class="panel panel-primary"> 
        <div class="panel-heading"> 
          <h3 class="panel-title">Активные карточки</h3> 
        </div> 
        <div class="panel-body"> 
          <div class="form-horizontal"> 
 
            <div class="form-group"> 
              <div class="col-sm-5"> 
              </div> 
              <div class="col-sm-1"> 
                <button class="btn btn-primary put_notebook" type="submit" data-toggle="modal" data-target="#notebook_modal"><i class="icon-save"></i>Выдать ноутбук</button> 
              </div> 
            </div> 
            .... .... .... 
            <div id="notebook_modal" class="modal" role="dialog"> 
              <div class="modal-dialog modal-lg"> 
                <div class="modal-content"> 
                </div> 
              </div> 
            </div>