CODEWITHSUNDEEP
javascriptjquerycss
sinusGob
sinusGob

Reputation: 4313

How do i add a transparent background when search?

My goal is to simply add a transparent background to the body of HTML when someone is searching on the input text field

Before searching enter image description here

Once searchenter image description here

Code

<body>
  <div class="container">
    <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="/">Testing</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">

      <form novalidate="novalidate" onsubmit="return false;" class="searchbox sbx-amazon" style="margin-left: 20%" id="search-realtime">
        <div role="search" class="sbx-amazon__wrapper">
          <input type="search" id="search_input" name="search" placeholder="Search your product.." autocomplete="off" required="required" class="sbx-amazon__input">
          <button type="submit" title="Submit your search query." class="sbx-amazon__submit">
            <svg role="img" aria-label="Search">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-11"></use>
            </svg>
          </button>
          <button type="reset" title="Clear the search query." class="sbx-amazon__reset">
            <svg role="img" aria-label="Reset">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-2"></use>
            </svg>
          </button>
        </div>
      </form>
    </div>
  </div>
</nav>


   </div>

</body>

On the search input later on, type in "I will" to see the result You can check jsfiddle for full code https://jsfiddle.net/Ldpqhkam/2/

Upvotes: 1

Views: 58

Answers (1)

HaukurHaf
HaukurHaf

Reputation: 13806

Just create a div element somewhere within the body (preferably at the bottom), like so:

<div id="search-overlay"></div>

and give it this CSS:

#search-overlay { position:fixed; top:52px; bottom:0; left:0; right:0; background:#000; opacity:.5; display:none; }

Then you toggle the display property of this overlay div by hooking into the appropriate events of the autocomplete, namely autocomplete:shown and autocomplete:closed

See working example here: https://jsfiddle.net/Ldpqhkam/5/

Upvotes: 1

Related Questions