彈出時爲對話框添加自定義動畫

我在其他網站嘗試了幾個例子，所以也沒有喜好。我的對話框佔用了整個瀏覽器的寬度和高度。

這裏的按鈕，即時點擊打開對話框，模態的HTML代碼，相關的一些對話框和JS代碼的CSS樣式，打開對話框：

// Get the modal 
 
var modal = document.getElementById('myModal'); 
 

 
// Get the button that opens the modal 
 
var btn = document.getElementById("myBtn"); 
 

 
// Get the <span> element that closes the modal 
 
var span = document.getElementsByClassName("close")[0]; 
 

 
// When the user clicks on the button, open the modal 
 
btn.onclick = function() { 
 
    modal.style.display = "block"; 
 
} 
 

 
// When the user clicks on <span> (x), close the modal 
 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
}

/* The Modal (background) */ 
 

 
.modal { 
 
    display: none; 
 
    /* Hidden by default */ 
 
    position: fixed; 
 
    /* Stay in place */ 
 
    z-index: 1; 
 
    /* Sit on top */ 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 100%; 
 
    /* Full width */ 
 
    height: 620px; 
 
    /* Full height */ 
 
    overflow: auto; 
 
    /* Enable scroll if needed */ 
 
    background-color: rgb(0, 0, 0); 
 
    /* Fallback color */ 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    /* Black w/ opacity */ 
 
    overflow-y: hidden; 
 
} 
 
/* Modal Content/Box */ 
 

 
.modal-content { 
 
    background-color: #fefefe; 
 
    /*margin: 15% auto; 15% from the top and centered */ 
 
    padding: 20px 40px 20px 40px; 
 
    border: 1px solid #888; 
 
    /*width: 80%; Could be more or less, depending on screen size */ 
 
}

<div class="site-body"> 
 
    <h1>Click the Button to Open Modal</h1> 
 
    <button id="myBtn" class="modal-btn">Open Modal</button> 
 
</div> 
 

 
<div id="myModal" class="modal"> 
 
    <!-- Modal content --> 
 
    <div class="modal-content"> 
 
    <span class="close">x</span> 
 
    <image class="logo" src="images/logo.png" /> 
 
    <div class="header"> 
 
     <div class="reference"> 
 
     <div class="row font-size1"> 
 
      <div class="label"><strong>OR Ref:</strong> 
 
      </div> 
 
      <div class="value"><strong>1-2-123456789</strong> 
 
      </div> 
 
     </div> 
 
     <div class="row font-size1"> 
 
      <div class="label"><strong>CP Ref:</strong> 
 
      </div> 
 
      <div class="value"><strong>hID-prod123456</strong> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="search"> 
 
     <div class="row right-align"> 
 
      <div class="left-align label show-right-margin"><strong>Note Type: </strong> 
 
      </div> 
 
      <select class="left-align"> 
 
      <option>All Notes</option> 
 
      <option>Any</option> 
 
      </select> 
 
      <button class="search-btn left-align">Search</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="error">Sorry, We couldn't fetch all of the notes you asked for. Please try again or report an error if it continues to happen 
 
    </div> 
 
    </div>

如何在彈出的對話框中添加動畫，如link？

來源

2016-08-25 Lalinda Sampath

JQuery有一個相當直接的方法來顯示/隱藏動畫元素。這個例子並不完全相同，但又非常簡單。

// When the user clicks on the button, open the modal 
btn.onclick = function() { 
    $('.modal').show('fast'); 
} 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    $('.modal').hide('fast'); 
}

你也可以嘗試使用jQuery slideDown()和slideUp()功能（只需更換show()和hide()這兩個分別）。

來源

2016-08-25 11:20:26 Shnibble

彈出時爲對話框添加自定義動畫

回答

相關問題