-1

The following css style rule is set to display none:

.modal {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    outline: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgba(0,0,0,0.2);
    display: none;
    align-items: center;
    z-index: 1;
}

When jQuery opens the modal, it adds the following style to me: display block, but I don't want a display block, but a display flex.

How can I make a display flex activate instead of the display block?

Code in https://jsfiddle.net/x4fqpn96/

Note: It does not work, because it is implemented with ajax where information is sent to php and it returns a response.

  • 1
    Does this answer your question? [how fade in a flex box?](https://stackoverflow.com/questions/28904698/how-fade-in-a-flex-box) – Phil Apr 07 '21 at 04:21
  • @Phil If I saw it, I tried to use the example as it exposes it there, but it did not work, did not perform any action –  Apr 07 '21 at 04:34

1 Answers1

0

Try:

  • Adding display:flex to the element even while it is hidden (and see if jQuery detexts it)
  • otherwise, swap fadeIn() with fadeIn().css('display', 'flex') to explicitly set the display.
Chris Happy
  • 7,088
  • 2
  • 22
  • 49