Displaying animated modal in Drupal

The instant quick show or hide effect for modal dialogs is good for some scenarios but, for others using a 'transition' is a better and more sophisticated way to open and close the modal window.

If you are creating a modal in Drupal 8 with one line of HTML you can specify dialog options and set fadeIn and fadeOut effect.

<a class="use-ajax btn" data-dialog-type="modal"
data-dialog-options="{&quot;width&quot;:1200, &quot;dialogClass&quot;: &quot;custom-class-modal&quot;, &quot;show&quot;: &quot;fadeIn&quot;, &quot;hide&quot;: &quot;fadeOut&quot;}"
href="/cart">{{ 'Cart'|t }}</a>

Also, you can use jQuery code to set fadeOut effect on closing modal by clicking outside of the modal window.

$(document).on('click', '.ui-widget-overlay.ui-front', function (){
 $('.ui-widget-overlay.ui-front').fadeOut(600, function(){ $(this).remove();})
 $('.custom-class-modal').fadeOut(600, function(){ $(this).remove();})
});

Branka Dakic