Javascript 如何创建一个模糊透明的引导模式标题和显示在站点后面的左侧模式边栏？

不确定是否可行，但这是一个很酷的想法，我想尝试一下，是否可以使模式标题（标题和关闭按钮所在的位置）的背景模糊（透明）并显示到站点，如果可以，是否可以在模式的左侧创建一个侧边栏，这也是透明和模糊的，并显示通过网站

只有使用JS、Bootstrap、HTML和CSS才能做到这一点吗

目前我的模态是这样的：

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

×
情态动词

&thinsp 所容纳之物

&thinsp  段落。

&thinsp 

关

---

出于隐私原因，文本和链接已更改为通用。

根据您的问题/评论，以下代码模糊了侧栏和模式，使您可以看到后面的站点。。。您可以将类

myblurtransparentefect

应用于要模糊的任何元素。。。快乐的编码和学习

函数w3\u open（）{
document.getElementById（“mySidebar”）.style.display=“block”；
}
函数w3_close（）{
document.getElementById（“mySidebar”）.style.display=“无”；
}

.myblurtransparentefect{
滤镜：模糊（1px）；
背景：透明！重要；
}

关闭&次；
开放模态
☰
我的页面
模态示例
模态标题
&时代；
情态体。。
关
默认情况下，此侧边栏是隐藏的，（style=“display:none”）

你必须点击“汉堡包”图标（左上角）打开它

侧边栏将隐藏页面内容的一部分

.modal content{background:transparent；}

不适合您？不，这不会模糊它，它只是透明的，而且它是整个modal，而不是标题和侧边栏。请检查stackoverflow，了解如何使用CSS进行模糊。。。下一步，将其应用于您需要的任何组件（侧杆或任何组件）。。。如果你陷入困境，在这里问一个问题，用最少的代码重新创建问题，这样人们可以帮助你是的，但是看到侧边栏和标题不会模糊，因为它们位于模式的顶部，不会显示到站点。你明白吗？侧边栏有模糊的类，你也可以在标题中添加相同的类-你可以分享一个屏幕截图，看看你在寻找什么样的变化…谢谢你的回复。有几个问题。边栏应该在模态中，而不是模态之外。第二，整个模式是模糊的，我只是想在模式内的标题和侧栏是模糊的。