title: How to add a backdrop over a div (lightbox effect)?
body: <p>i'm editing an AngularJS project and i want to add a backdrop (like Bootstrap Modal) over the main DIV when users click on search input box.</p>
  
  <p><a href="https://i.stack.imgur.com/KkR00.png" rel="noreferrer"><img src="https://i.stack.imgur.com/KkR00.png" alt="enter image description here"></a></p>
  
  <p>Here is the HTML code:</p>
  
  <pre><code>    &lt;div class="main-box"&gt;
          &lt;div class="search-function" ng-click="showInputForm()"&gt;
              &lt;img src="../images/my_project/search.png"&gt;
          &lt;/div&gt;
  
          &lt;div class="search-form" ng-if="showForm"&gt;
              &lt;form ng-submit="textSearch()"&gt;
                  &lt;input type="text" autofocus class="search-input" ng-model="text.value" /&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>As you can see the white box appears when users click on the search icon and now i want to add a backdrop over the main DIV, except on the white box.</p>
  
  <p>Here is the LESS code:</p>
  
  <pre><code>.search-function {
    margin-left: 30%;
  }
  
  .search-form {
    padding-left: 15%;
    padding-right: 15%;
    position: relative;
    z-index: 0;
  
    .search-input {
      color: #2b84a6 !important;
      background-color: #fff !important;
      font-weight: 300;
      font-size: 16px;
    }
  }
  </code></pre>
  
  <p>How can i reach this?</p>