ポップアップ時にダイアログボックスのカスタムアニメーションを追加する

Question

ダイアログボックスにこの効果を追加する場合は、linkとしてください。

私は他のサイトでいくつかの例を試してみましたが、喜んではありません。私のダイアログボックスはブラウザ全体の幅と高さを取ります。

ここで私は、ダイアログボックス、モーダル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のようにポップアップすると、ダイアログボックスにアニメーションを追加するにはどうすればよいですか？

Answer 1

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'); 
} 

また、（単にそれぞれこれら二つとshow()とhide()を置き換える）jQueryのslideDown()とslideUp()機能を試すことができます。