如何在按下按钮时激活 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>

被按下。

我们在这个系统中使用 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>