Как активировать кнопку Bootstrap на кнопке

Question

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

Ниже изображение, чтобы показать, что я пытаюсь достичь: http://s17.postimg.org/glt8khwlb/stackoverflow.jpg

Мой код значок самолета и ниже области является:

<li id="ts-travel" ng-show="permissions.canViewDemonstrationMode"> 
     <a ng-click="searchTabToggle('travel')"> 
      <i class="ticon ti-airplane_take_off ti-2x"></i> 
     </a> 
    </li> 
</ul> 
<div class="tab-content bord-srch tab-pad overflow-hidden"> 
    <div class="tab-pane active cont fade in" id="products"> 
      <div class="form-group"> 
       <div class="col-sm-12"> 
       </div> 
      </div> 
     </div> 
     <div class="tab-pane cont fade in" id="travel"> 
      <div class="clear"></div> 
       <div ng-include src="'/views/Travel/Search/travel-search.html'" autoscroll=""> 
       </div> 
      </div> 
     </div> 
    </div> 

Это нужно будет активировать, когда:

<a ng-click="searchTabToggle('travel')"> 
    <i class="ticon ti-airplane_take_off ti-2x"></i> 
</a> 

нажимается.

Мы используем угловую JS для этой системы

Большое спасибо!

Answer 1

Будет ли это решить вашу проблему?

Добавить фон в шаблон, но скрытый, если buttonIsPressed переменная установлена ​​истина:

<div class="modal-backdrop fade" style="z-index: 1040" ng-show="buttonIsPressed"></div> 

Добавить поведение вашей кнопки, так что переменная buttonIsPressed обновляется при нажатии:

<a ng-click="searchTabToggle('travel')" ng-mousedown="buttonIsPressed = true" ng-mouseup="buttonIsPressed = false"> 
    <i class="ticon ti-airplane_take_off ti-2x"></i> 
</a>