More than 5 years have passed since last update.

fadeIn( )メソッドを使用したら、モーダルがcssで指定した位置と違う箇所に出てくる時の解決法

Posted at 2018-07-15

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

参考にしたのはこの記事！感謝していますm(_ _)m
https://twotone.me/web/895/