0

I need to implement a method of activating the bootstrap modal backdrop/a background blur when a button on the top navigation menu is pressed. When the user clicks the aeroplane icon the main content area of the page needs to go dark and then return to normal when the button is clicked off.

Below is an image to show what I am trying to achieve: http://s17.postimg.org/glt8khwlb/stackoverflow.jpg

My code for the aeroplane icon and following area is:

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

It would need to activate when:

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

is pressed.

We are using Angular JS for this system

Many thanks!

Adam S
  • 1
  • 1
  • Use Angular, or jQuery, but [not both](http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background). – Jonast92 Oct 27 '14 at 21:57

1 Answers1

0

Would this solve your problem ?

Add backdrop to your template, but hidden unless buttonIsPressed variable is set to true : 

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

Add behavior to your button so that the buttonIsPressed variable is updated when clicking :

<a ng-click="searchTabToggle('travel')" ng-mousedown="buttonIsPressed = true" ng-mouseup="buttonIsPressed = false">
    <i class="ticon ti-airplane_take_off ti-2x"></i>
</a>
AlexHv
  • 1,694
  • 14
  • 21
  • Thanks for the response. I may just be putting the backdrop in the wrong part of my template but nothing different is happening when I press the link unfortunately – Adam S Oct 27 '14 at 22:46
  • are the parts of the template ruled by the same controller ? – AlexHv Oct 27 '14 at 22:51
  • Yeh think so. I asked one of the developers for help and he gave me this: data-ng-class="{'modal-backdrop':showThinkSearch}" I can get it to show some sort of backdrop but it doesn't cover what I want it to. – Adam S Oct 28 '14 at 03:40
  • you should be able to give it the behavior that you want with your own class then. With position: fixed for example ? – AlexHv Oct 28 '14 at 07:37