如何創建一個模糊和透明的 Bootstrap 模態標題和顯示在網站后面的左側模態側邊欄？

Question

不確定是否可能，但我想嘗試一個很酷的主意，是否可以使模態標題（標題和關閉按鈕所在的位置）的背景模糊（透明）並顯示到網站，如果是這樣，是否可以在模態左側創建一個側邊欄，它也是透明和模糊的，並顯示到網站？

是否可以僅使用 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>

出於隱私原因，文本和鏈接已更改為通用。

Answer 1

根據您的問題/評論，以下代碼模糊了側邊欄和具有透明度的模態，以便您可以在后面看到該網站...您可以將myBlurTransparentEffect類myBlurTransparentEffect您想要模糊的任何元素...快樂編碼和學習！！

 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>