How do I create a blurred and transparent Bootstrap modal header and left modal sidebar that show behind to the site?

Question

Not sure if it is possible, but is a cool idea I'd like to try, is it possible to make the modal header (where the title and close button are)'s background to be blurred (transparent) and show through to the site, and if so, is it possible to create a sidebar on the left side of the modal, that also is transparent and blurred and shows through to the site?

Is it possible to do this only with JS, Bootstrap, HTML, and CSS.

Currently my modal is like this:

<div class="modal fade" id="modal-1" role="dialog">
    <div class="modal-dialog modal-lg">
<div class="modal-content" style="
    box-shadow: 10px 10px 40px 10px rgba(1, 1, 1, 0.37);">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title">Modal</h4>
          </div> 
       <h3><br> &nbsp; &thinsp; &#8202;Content</h3>
       <br><p> &nbsp; &thinsp; &#8202; Paragraph.</p>       
       &nbsp; &thinsp; &#8202;<a href="#" class="button">Link</a><p></p>
            <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

Text and links were changed to generic for privacy reasons.

Answer 1

as per your question/comments, the following code has blurred sidebar & modal with transparency so that you can see the site at the back... you can apply the class myBlurTransparentEffect to any element that you'd like to blur... Happy coding and learning !!

function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}

.myBlurTransparentEffect {
  filter: blur(1px);
  background: transparent !important;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">


<!-- Sidebar -->
<div class="w3-sidebar w3-bar-block w3-border-right myBlurTransparentEffect" style="display:none" id="mySidebar">
  <button onclick="w3_close()" class="w3-bar-item w3-large">Close &times;</button>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>

</div>

<!-- Page Content -->
<div class="w3-teal">
  <button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">☰</button>
  <div class="w3-container">
    <h1>My Page</h1>
  </div>
</div>

<img src="https://www.akberiqbal.com/Jumbo.jpg" alt="stack Overflow" style="width:100%">


<div class="container">
  <h2>Modal Example</h2>

  <!-- The Modal -->
  <div class="modal " id="myModal">
    <div class="modal-dialog">
      <div class="modal-content myBlurTransparentEffect">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
  </div>

</div>


<div class="w3-container">
  <p>This sidebar is hidden by default, (style="display:none")</p>
  <p>You must click on the "hamburger" icon (top left) to open it.</p>
  <p>The sidebar will hide a part of the page content.</p>
</div>