The current state of a modal/dialog opening in Drupal 8 (and 7 for that matter) is pretty clunky from a user experience perspect. Leveraging some type of animation/fade would really enhance the elegance + cohesiveness of the modal. I notice bootstrap allows a "fade" class on the modal, which gives it a fade effect (I assume). Is there a way to add this type (or any type) of animation to a Drupal 8 modal without needing bootstrap? Am I missing something simple?

Edit: Thanks for quick replies and patience with a newbie. So I'm opening a node/add form into a modal with a link like so..

<a class="use-ajax" data-dialog-options="{&quot;width&quot;:800}" data-dialog-type="modal" href="/node/add/article">Add Article</a>

I'd like the modal to open/close with a fade effect (or slide in, etc). Is there a way to leverage JS, CSS or Drupal itself to create this animation?

Is there a better solution all together to displaying a node/add form in a popup/lightbox type element with ajax?

Thank you!

  • Welcome to Drupal Answers! I fear, even you experienced the clunky behavior when using Drupal, your question is too broad for this group and therefore not well-suited to be answered here. Please note, that this group is about answering Drupal related, to-the-point questions when you experience problems while working on your own solutions. (drupal.stackexchange.com/help/on-topic) Missing JavaScript effects, UI improvements or general coding help is off-topic here. Commented Jan 29, 2018 at 23:16
  • perhaps writing what you did and what is missing from the solution will lead to some answers ... did you try the bootstrap theme ?
    – GiorgosK
    Commented Jan 30, 2018 at 6:51
  • Thanks to the both of you. Hopefully the edit above brings more clarity.
    – Sampsonite
    Commented Jan 31, 2018 at 2:22

2 Answers 2


What do you need the modal to do? I often use animated modals for my Drupal projects - http://joaopereirawd.github.io/animatedModal.js/

It seems to work pretty well for menus and forms in my experience.

It uses animate.css ( https://daneden.github.io/animate.css/ ) which you can use also to create some nice transitional effects.

  • Looking for the modal to open a node/add form. See my edit above. Not sure how I'd tie that into the animatedModal.js (with the need for ajax, and the removal of the header, etc)
    – Sampsonite
    Commented Jan 31, 2018 at 2:21

You can use

<a class="use-ajax" data-dialog-options='{"width":"800","dialogClass":"custom-class-modal","show":"fadeIn","hide":"fadeOut"}' data-dialog-type="modal" href="/node/add/article">Add Article</a>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.