Как создать размытый и прозрачный модальный заголовок Bootstrap и левую модальную боковую панель, которые отображаются на сайте? - PullRequest
Новая
       7

Как создать размытый и прозрачный модальный заголовок Bootstrap и левую модальную боковую панель, которые отображаются на сайте?

0 голосов
/ 20 апреля 2019

Не уверен, если это возможно, но это крутая идея, которую я хотел бы попробовать, можно ли сделать модальный заголовок (где находятся заголовок и кнопка закрытия) размытым (прозрачным) и показать фон через сайт, и если да, возможно ли создать боковую панель в левой части модального окна, которая также будет прозрачной и размытой и будет отображаться на сайте?

Возможно ли это сделать только с 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>

Текст и ссылки были изменены на общие по соображениям конфиденциальности.

1 Ответ

0 голосов
/ 21 апреля 2019

в соответствии с вашим вопросом / комментарием, следующий код имеет размытую боковую панель и модал с прозрачностью, так что вы можете видеть сайт сзади ... вы можете применить класс 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>
...