不能動畫關閉按鈕

Question

我已經創建了一個div，它出現在按鈕上，並帶有動畫。但是當我試圖做關閉它的動畫時。沒有發生。它簡單地關閉。

這裏是鏈接到我的小提琴：https://fiddle.jshell.net/4o669azn/4/

請幫

Answer 1

改變舊：

span.onclick = function() {z 
    modal.style.display = "none"; 
    modal1.style.display='none'; 
} 

要：

span.onclick = function() { 
    $(".modal").slideUp("slow"); 
    $(".modal1").slideUp("slow"); 
} 

因此你需要的jQuery包括在內。

Answer 2

以下是您的純HTML5和CSS3交互模態！ - 沒有Javascript！

JSFiddle

網頁設計的未來就是與所有這些新的東西，現在你可以不用JS kickass！

所以這個工作通過創建input checkboxes來作爲切換工作。使用for=屬性附加label。這些將作爲您的buttons然後將您的複選框放在代碼中的任何位置，併爲它們提供display:none;的CSS值。這將隱藏它們的好處，但是非常寶貴的事實是，它們仍然可以正常工作，因爲您已將label標籤附加到它們上面，它們的作用就像button一樣檢查它們。
現在，您可以對輸入複選框僞類:checked制定CSS規則，並將它們鏈接到不同的CSS選擇器，以便在整個HTML文檔樹的任何地方作用於任何元素！這使您能夠創建AMAZING以及零JS無限的UI體驗！

有關您的模態的關閉按鈕，我把它變成一個簡單的form與type="reset"一個button標籤然後附加的原始頂部label到使用表單屬性，這樣的形式之一。當你打要麼2個復位按鈕，它將它們全部發送回「未檢查」狀態，因此 - 轉換反轉回到初始狀態！是的，擺脫了動畫，並使用轉換。他們是完成它的竅門！並讓動畫輕鬆恢復到複選框上的初始狀態，從而再次取消選中。至少減少了50％的代碼！

我會給你最後的造型細節。

#myBtn { 
 
    border: 1px solid black; 
 
} 
 

 
#modal-toggle, 
 
#modal1-toggle { 
 
    display: none; 
 
} 
 

 
#modal-toggle:checked ~ .modal, 
 
#modal1-toggle:checked ~ .modal1 { 
 
    visibility: visible; 
 
    position: fixed; 
 
} 
 

 
#modal-toggle:checked ~ .modal > .modal-content, 
 
#modal1-toggle:checked ~ .modal1 > .modal-content1 { 
 
    top: 0; 
 
    left: 0; 
 
    opacity: 1; 
 
} 
 

 
.modal { 
 
    visibility: hidden; 
 
    /* Hidden by default */ 
 
    position: absolute; 
 
    /* Stay in place */ 
 
    z-index: 1; 
 
    /* Sit on top */ 
 
    
 
    /* Location of the box */ 
 
    top: 20%; 
 
    width: 50%; 
 
    /* Full width */ 
 
    height: 70%; 
 
    /* Full height */ 
 
    overflow: auto; 
 
    /* Enable scroll if needed */ 
 
    border: 1px solid transparent; 
 
} 
 

 

 
/* Modal Content */ 
 

 
.modal-content { 
 
    position: relative; 
 
    top: -300px; 
 
    opacity: 0; 
 
    margin: auto; 
 
    background: white; 
 
    border: 1px solid #888; 
 
    width: 80%; 
 
    transition: all 0.4s linear; 
 
} 
 

 

 
/* The Close Button */ 
 

 
.close { 
 
    color: white; 
 
    position: relative; 
 
    float: right; 
 
    display: block; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
} 
 

 

 

 
.close:hover, 
 
.close:focus { 
 
    color: #000; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 

 
.modal-header { 
 
    padding: 0 16px; 
 
    display: block; 
 
    background-color: #5cb85c; 
 
    color: white; 
 
    overflow: hidden; 
 
    
 
} 
 

 
.modal-body { 
 
    padding: 2px 16px; 
 
    height: 200px; 
 
} 
 

 
.modal-footer { 
 
    padding: 2px 16px; 
 
    background-color: #5cb85c; 
 
    color: white; 
 
    height: 50px; 
 
    text-align: left; 
 
} 
 

 
.modal1 { 
 
    visibility: hidden; 
 
    /* Hidden by default */ 
 
    position: absolute; 
 
    /* Stay in place */ 
 
    z-index: 1; 
 
    /* Sit on top */ 
 
    
 
    /* Location of the box */ 
 
    top: 20%; 
 
    left: 39em; 
 
    width: 30%; 
 
    /* Full width */ 
 
    height: 70%; 
 
    /* Full height */ 
 
    overflow: auto; 
 
    /* Enable scroll if needed */ 
 
    border: 1px solid transparent; 
 
} 
 

 

 
/* Modal Content */ 
 

 
.modal-content1 { 
 
    position: relative; 
 
    
 
    left: -650px; 
 
    opacity: 0; 
 
    margin: auto; 
 
    background: white; 
 
    border: 1px solid #888; 
 
    width: 80%; 
 
    transition: all 0.4s linear; 
 
} 
 

 

 

 

 

 

 
/* The Close Button */ 
 

 
.close1 { 
 
    color: white; 
 
    float: right; 
 
    
 
    font-weight: bold; 
 
} 
 

 

 

 
.close1:hover, 
 
.close1:focus { 
 
    color: #000; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 

 

 

 
.modal-header1 { 
 
    padding: 2px 16px; 
 
    background-color: #5cb85c; 
 
    color: white; 
 
    height: 30px; 
 
} 
 

 
.modal-body1 { 
 
    padding: 2px 16px; 
 
    height: 200px; 
 
} 
 

 
.modal-footer1 { 
 
    padding: 2px 16px; 
 
    background-color: #5cb85c; 
 
    color: white; 
 
    height: 50px; 
 
}

<label id='myBtn' for="modal-toggle"> 
 
    pressme 
 
</label> 
 
<input id="modal-toggle" form="close-out1" type="checkbox"> 
 
<div id="myModal" class="modal"> 
 

 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
    <div class="modal-header"> 
 
     <form id="close-out1"> 
 
     <button form="close-out1" type="reset" class="close">&times;</button> 
 
     </form> 
 
    </div> 
 
    <div class="modal-body"> 
 
     <p>Some text in the Modal Body</p> 
 
     <p>Some other text...</p> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <label for="modal1-toggle" class=" btn btn-default" id='myBtn1'>Priority</label> 
 
    </div> 
 
    </div> 
 

 
</div> 
 
<input id="modal1-toggle" form="close-out2" type="checkbox"> 
 
<div id="myModal1" class="modal1"> 
 

 
    <!-- Modal content --> 
 
    <div class="modal-content1"> 
 
    <div class="modal-header1"> 
 
     <form id="close-out2"> 
 
     <button type="reset" form="close-out2">&times;</button> 
 
     </form> 
 
    </div> 
 

 
    <div class="modal-body1"> 
 
     <p>Some text in the Modal Body</p> 
 
     <p>Some other text...</p> 
 
    </div> 
 
    <div class="modal-footer1"> 
 
     <h3>Modal Footer</h3> 
 
    </div> 
 
    </div> 
 
</div>