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>

如何按下按钮激活Bootstrap背景

1 个答案: