Как добавить фон в div (эффект лайтбокса)?

Question

Я редактирую проект AngularJS, и я хочу добавить задний фон (например, Bootstrap Modal) поверх основного DIV, когда пользователи нажимают на поле ввода поиска.

Вот HTML код:

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

Как вы можете видеть, появляется белая коробка, когда пользователи нажимают на иконку поиска, и теперь я хочу, чтобы добавить фон на главный DIV, за исключением белого ящика.

Вот МЕНЬШЕ код:

.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; 
    } 
} 

Как я достичь этого?

Answer 1

Что-то вроде этого

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

И добавить CSS в

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

Answer 2

Вот очень полная статья о различных способах достижения того, что вам нужно

CSS Overlay Techniques