jquery - 如何在按下按钮时激活 Bootstrap 背景

Question

我需要实现一种在按下顶部导航菜单上的按钮时激活 Bootstrap 模态背景/背景模糊的方法。当用户单击飞机图标时，页面的主要内容区域需要变暗，然后在单击按钮时恢复正常。

下面是一张图片，展示了我正在努力实现的目标: 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>

被按下。

我们正在为这个系统使用 Angular JS

非常感谢!

Answer 1

这会解决您的问题吗？

将背景添加到您的模板，但隐藏，除非 buttonIsPressed 变量设置为 true :

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