jsファイルからモーダルを呼び出そうと以下のようにコードを書いていたが、モーダルをcssで中央に設定したものの、fadeInで呼び出すと左上に行ってしまう。

stylesheet.css

.bg-modal{
  display:flex
  justify-content:center;
  align-items:center;
  display:none;
}

script.js

$(function(){
  $('.signup').click(function(){
    $('.bg-modal').fadeIn();
  });
});

#原因

jqueryの.fadeIn( )メソッドでは、フェードイン時にdisplay:block;が勝手についてしまう。
そのため、cssでdisplay:flex;を指定していたのに反映されずにdisplay:block;が適用されていたのだ。

解決した時のコード

script.js

$(function(){
  $('.signup').click(function(){
    $('.bg-modal').fadeIn().css('display','flex');
  });
});