title: How do I create a blurred and transparent Bootstrap modal header and left modal sidebar that show behind to the site?
body: <p>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?</p>
  
  <p>Is it possible to do this only with JS, Bootstrap, HTML, and CSS.</p>
  
  <p>Currently my modal is like this:</p>
  
  <pre><code>&lt;div class="modal fade" id="modal-1" role="dialog"&gt;
      &lt;div class="modal-dialog modal-lg"&gt;
  &lt;div class="modal-content" style="
      box-shadow: 10px 10px 40px 10px rgba(1, 1, 1, 0.37);"&gt;
          &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;×&lt;/button&gt;
            &lt;h4 class="modal-title"&gt;Modal&lt;/h4&gt;
            &lt;/div&gt; 
         &lt;h3&gt;&lt;br&gt; &amp;nbsp; &amp;thinsp; &amp;#8202;Content&lt;/h3&gt;
         &lt;br&gt;&lt;p&gt; &amp;nbsp; &amp;thinsp; &amp;#8202; Paragraph.&lt;/p&gt;       
         &amp;nbsp; &amp;thinsp; &amp;#8202;&lt;a href="#" class="button"&gt;Link&lt;/a&gt;&lt;p&gt;&lt;/p&gt;
              &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Text and links were changed to generic for privacy reasons.</p>