模糊切換/合攏時的效果模式

Question

當我通過單擊按鈕打開/切換模式時，我希望對背景具有持久的模糊效果。

我有什麼至今：

我有一個按鈕，點擊它會打開一個引導模式。在這個模式中，你可以再次點擊一個按鈕切換到另一個模態，這意味着第一個模態隱藏，第二個模態隱藏。從第二個模態中，您可以切換回第一個模式或關閉它。

當我通過單擊按鈕打開第一個模式時，我的背景具有模糊效果。如果通過單擊關閉按鈕關閉模式，模糊效果將消失。當我在模態外單擊時，效果也會消失，所以模態會關閉。

代碼：

<button data-toggle="modal" data-target="#loginModal"> 
    <span class="glyphicon glyphicon-log-in"></span> 
</button> 
<section role="region"> 
    <div class="modal fade" id="registerModal" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       /* almost similar to loginModal */ 
      </div> 
     </div> 
    </div> 
    <div class="modal fade" id="loginModal" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="jumbotron"> 
        <header class="modal-header"> 
         <div class="well"> 
          <h2 class="modal-title">Login Formular</h2> 
         </div> 
        </header> 
        <article> 
         <div class="well modal-body"> 
          /* Form */ 
         </div> 
         <div class="modal-footer"> 
          <div class="pull-left"> 
           <a href="" data-dismiss="modal" data-toggle="modal" data-target="#registerModal"> 
           <i class="glyphicon glyphicon-edit"></i> 
           </a> 
          </div> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 
        </article> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

jQuery代碼：

//Blur 
$("button[data-target='#loginModal'], a[data-target='#registerModal'], a[data-target='#loginModal']").click(function() { 
    $("#main").css({ 
     "filter": "blur(20px)", 
     "transition": "all 0.75s ease-out" 
    }); 
}); 
//Remove Blur 
$(".modal .modal-footer button").click(function() { $("#main").removeAttr("style"); }); 

$("#loginModal").on("hidden.bs.modal", function(e) { $("#main").removeAttr("style"); }); 

我現在的問題是，我沒有一個想法如何，當我切換到第二個模式應用持久模糊效果，因爲第一模態將被關閉，第二模態將被打開。我的想法是，我必須檢查兩個模態是否關閉，但無法完成，因爲我不知道是否有這種方式。

另一件事是我想通過單擊模式對話框並結束模糊效果來關閉模式。我在身上附加了一個點擊事件，可消除模糊效果，但問題在於您還可以單擊模式，並且它會移除模糊，因爲身體會覆蓋整個頁面...

$("#loginModal, #registerModal").on("show.bs.modal", function() { 
    $("body").on("click", function(e) { 
     $("#main").removeAttr("style"); 

     $("body").off("click"); 
    }); 
}); 

也許問題是微不足道的，但我無法完成。希望有一個人誰可以幫我出這一點;）

Answer 1

你就不能toggle和dismiss同時一個模式。

我放在同一click處理兩個不同的「動作」：

1. 關閉「其他」莫代爾
2. 打開目標模式

關於主的blur效果文本，我把它放在一個CSS類（更乾淨的代碼），我用一個「標誌」，以防止它被刪除，如果第二個模式打開。

此外，我添加了一個#在href屬性的圖形錨，以防止其行爲加載頁面。

//Blur 
 
var removeBlur = true; 
 
$("[data-target]").click(function(e) { 
 

 
    removeBlur = false; // Set flag to false 
 

 
    var thisTarget = $(this).data("target"); // Get the target modal id 
 
    console.log(thisTarget); 
 

 
    $(".modal").not(thisTarget).modal("hide"); // Hide the other modal 
 

 
    $(thisTarget).modal("show"); // Show the "target" modal 
 

 
    $("#main").addClass("blurred"); // Add the blurry effect 
 

 
    setTimeout(function(){ // Wait 400ms to let the hidden.bs.modal the "false" removeBlur flag while it is set to false. 
 
    removeBlur = true; // reset flag 
 
    },400) 
 
}); 
 

 
//Remove Blur 
 
//$(".modal .modal-footer button").click(function(){ $("#main").removeClass("blurred"); }); // This one is not needed. 
 

 
$(".modal").on("hidden.bs.modal", function(e) { // On modal hide remove the blur effect if removeBlur flag is true 
 
    if(removeBlur){ 
 
    $("#main").removeClass("blurred"); 
 
    } 
 
});

#main{ 
 
    margin:1em; 
 
} 
 
.blurred{ 
 
    filter: blur(2px); 
 
    transition: all 0.75s ease-out; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<button data-target="#loginModal"> 
 
    <span class="glyphicon glyphicon-log-in"></span> 
 
</button> 
 
<section role="region"> 
 
    <div class="modal fade" id="registerModal" role="dialog"> 
 
     <div class="modal-dialog"> 
 
      <div class="modal-content"> 
 
       /* almost similar to loginModal */ 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="modal fade" id="loginModal" role="dialog"> 
 
     <div class="modal-dialog"> 
 
      <div class="modal-content"> 
 
       <div class="jumbotron"> 
 
        <header class="modal-header"> 
 
         <div class="well"> 
 
          <h2 class="modal-title">Login Formular</h2> 
 
         </div> 
 
        </header> 
 
        <article> 
 
         <div class="well modal-body"> 
 
          /* Form */ 
 
         </div> 
 
         <div class="modal-footer"> 
 
          <div class="pull-left"> 
 
           <a href="#" data-target="#registerModal"> 
 
           <i class="glyphicon glyphicon-edit"></i> 
 
           </a> 
 
          </div> 
 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
         </div> 
 
        </article> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section> 
 
<div id="main"> 
 
<p> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sollicitudin leo eu bibendum aliquam. Curabitur aliquet eros lectus, et molestie nisi tempor vel. Quisque mollis, sapien hendrerit accumsan pellentesque, quam quam vestibulum orci, nec ornare diam turpis ut purus. Cras ut quam ut nibh sollicitudin scelerisque. Nunc volutpat mauris sed porta lacinia. Vivamus pharetra eget tortor nec venenatis. Vivamus nec velit ut felis consectetur ullamcorper. Suspendisse id dictum enim. Nulla ut volutpat nisi, vitae tempor diam. Proin mattis dui ante, fermentum lacinia ex vulputate at. Donec tristique eget urna vel convallis. Mauris ac elit ut orci pretium faucibus ac sit amet justo. 
 
</p> 
 
<p> 
 
Suspendisse gravida sodales lorem, sit amet posuere nunc semper et. Proin euismod at arcu in suscipit. Quisque eu efficitur nunc, quis hendrerit orci. Mauris a erat quis ante aliquam imperdiet posuere ac dui. Nam sit amet consectetur nunc. Donec risus ex, convallis eget orci tristique, rhoncus auctor tortor. Aliquam sit amet fermentum nisl. Morbi vel ipsum et nisl tristique fringilla nec sed ipsum. Aenean aliquet purus id bibendum tempus. Suspendisse auctor pretium augue, a tincidunt sapien vehicula quis. Ut eu sagittis turpis. Nulla rhoncus felis nibh, in viverra magna sagittis congue. Integer tempus ultricies viverra. Sed a aliquet velit. 
 
</p> 
 
<p> 
 
Cras sagittis, dolor accumsan commodo condimentum, tellus lorem bibendum diam, in consequat augue quam nec est. Quisque id eros tortor. Ut ex risus, vehicula quis cursus a, efficitur convallis erat. Maecenas egestas lobortis maximus. Phasellus varius, ipsum in maximus ultrices, orci lectus tincidunt magna, vel vestibulum urna turpis ac leo. Nulla nulla massa, consequat non vulputate imperdiet, volutpat dapibus orci. Etiam consequat volutpat est, id tempus turpis venenatis vitae. Praesent arcu erat, porta molestie neque non, ultrices dignissim sem. Suspendisse potenti. Duis nec mauris commodo libero maximus egestas. Sed laoreet maximus tellus semper accumsan. 
 
</p> 
 
<p> 
 
In hendrerit molestie blandit. In hac habitasse platea dictumst. Nullam in ipsum urna. Maecenas in ante nisi. Integer porta molestie enim, sit amet scelerisque mauris fringilla elementum. Phasellus at elit mattis, scelerisque ligula et, imperdiet leo. Suspendisse nec dignissim augue. Cras neque turpis, tempus vel tortor sit amet, commodo laoreet augue. Aliquam ac dui vel lorem facilisis tristique non non urna. Cras pharetra mauris id aliquet luctus. Morbi sit amet felis a lectus maximus lacinia. Sed quam elit, imperdiet eu rhoncus in, scelerisque sed arcu. Aliquam feugiat ultrices finibus. Suspendisse a semper risus, gravida laoreet lacus. In fermentum auctor volutpat. Nullam egestas, lorem eget imperdiet semper, elit nisl aliquet neque, nec mollis erat lacus ut nibh. 
 
</p> 
 
<p> 
 
Ut sit amet ex iaculis, vestibulum urna id, dictum elit. Nunc semper semper lacus at feugiat. Nam viverra orci vel risus vulputate, sed fringilla turpis ultrices. Vivamus pulvinar, mi in bibendum scelerisque, nunc augue laoreet sem, vitae posuere ipsum mauris vel turpis. Aliquam quis nulla maximus ligula eleifend aliquet ut a neque. Cras lobortis id ante quis sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus quam at rhoncus venenatis. Sed tempus nec urna vel tempus. Mauris aliquam, risus id mollis commodo, dolor tortor porta augue, in consequat purus velit nec ante. 
 
</p> 
 
<p> 
 
Proin tempus pharetra nisl ut rhoncus. Fusce dapibus tincidunt lobortis. Donec dolor nisi, posuere ut ullamcorper a, molestie ut enim. Sed quis felis accumsan, pellentesque nunc at, vestibulum dolor. Pellentesque quis ex nec ex tincidunt sodales. Pellentesque eget justo nisl. Nullam rutrum ligula sed libero tempor ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam enim felis, cursus sed sem a, gravida consectetur diam. Ut accumsan diam ut tempor fringilla. Etiam at ex lacus. Morbi tortor mauris, blandit sed mi ut, eleifend tempus magna. 
 
</p> 
 
<p> 
 
Maecenas at rutrum ante. Aenean eu sapien in sem hendrerit facilisis dictum vel sem. Ut laoreet ligula quis risus congue commodo. Donec tempor, turpis sollicitudin vulputate auctor, nunc mi maximus lectus, ornare lobortis metus neque a nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed id tempor purus. Donec ipsum mauris, molestie at posuere non, scelerisque ac massa. Etiam scelerisque tempus ante, finibus dictum ante gravida eget. Suspendisse convallis risus vel velit ornare, vitae aliquam purus dictum. Nullam suscipit magna tellus, a accumsan elit viverra in. Etiam rutrum turpis non lorem condimentum viverra. 
 
</p> 
 
<p> 
 
Maecenas cursus eros sed urna laoreet pulvinar. Sed a consectetur felis, consectetur gravida enim. Etiam varius ac ligula vel ultrices. Proin et lectus euismod, molestie purus ut, hendrerit mi. Suspendisse lobortis ipsum sem. Quisque nec augue quis lectus egestas consequat. Donec in arcu in mi feugiat congue. Nam porta augue venenatis diam auctor, quis aliquam dolor pulvinar. Sed vitae nibh nec ligula congue facilisis ac eget felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tellus arcu, commodo a vestibulum et, pulvinar vel lacus. 
 
</p> 
 
<p> 
 
Quisque vel elit vitae turpis sollicitudin fringilla. Quisque iaculis dignissim sodales. Vivamus in nisi id turpis commodo pretium ornare ac enim. Nulla eu ex lobortis, lacinia mauris sed, consectetur diam. Donec at metus vel metus tincidunt blandit. Donec molestie purus quis sapien rhoncus euismod. Donec gravida, nunc quis consequat ornare, augue leo vestibulum eros, ac euismod lectus ex non mi. 
 
</p> 
 
<p> 
 
Vestibulum quis libero sed risus consectetur porttitor sed quis nunc. Duis malesuada erat posuere erat suscipit, nec commodo augue faucibus. Nulla euismod diam eget sollicitudin fermentum. Sed ullamcorper tempus augue et tempus. Mauris non neque justo. Aenean tristique mauris nibh, sit amet lobortis est tristique ut. Aliquam nibh ex, varius vel consequat nec, vehicula non turpis. 
 
</p></div>