html - How to add a backdrop over a div (lightbox effect)? -

i'm editing angularjs project , want add backdrop (like bootstrap modal) on main div when users click on search input box.

here html code:

    <div class="main-box">         <div class="search-function" ng-click="showinputform()">             <img src="../images/my_project/search.png">         </div>          <div class="search-form" ng-if="showform">             <form ng-submit="textsearch()">                 <input type="text" autofocus class="search-input" ng-model="text.value" />             </form>         </div>     </div> 

as can see white box appears when users click on search icon , want add backdrop on main div, except on white box.

here less 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;   } } 

how can reach this?

something this

 <div class="main-box">     <div class="backdrop" ng-if="showform"></div>     <div class="search-function" ng-click="showinputform()">         <img src="../images/my_project/search.png">     </div>      <div class="search-form" ng-if="showform">         <form ng-submit="textsearch()">             <input type="text" autofocus class="search-input" ng-model="text.value" />         </form>     </div> </div> 

and add css

.backdrop {     position: absolute;     left: 0;     right: 0;     top: 0;     bottom: 0;     background: black;     opacity: 0.5; }