要素を隠すとき「visibility: hidden;」「display: none;」「opacity: 0;」どれを使う

2023年1月8日

JavaScriptでいろいろ参考にしながらモーダルウィンドウを実装しています。

最初モーダルウィンドウは隠しておいて、ボタンをクリックすると出現するようにしました。

要素を隠しておくのは「display:none;」だと思っていたのですが、他の方法で隠す方もいてどれが良いのか迷ってしまいました。

★この記事の目次★

1. モーダルウィンドウ
2. 「display:none;」
3. 「visibility: hidden;」
4. 結局どれが良いのか

モーダルウィンドウ

今回はこのようなモーダルウィンドウを作成しました。

【HTML】

<body>
	<div id="modal-open">新規登録はこちら</div>
	
<div id="modal-bg"></div>

<div id="modal-container">
<div><input type="text" placeholder="メールアドレス"></div>
<div><input type="password" placeholder="パスワード"></div>
<div id="submit-btn">新規登録</div>
<div id="modal-close">✕</div>
</div>

	<script src="js/script.js"></script>
</body>

【CSS】

#modal-open,
#submit-btn {
width: 320px;
margin: 10px auto;
background:rgb(127, 205, 127);
padding: 10px;
color: #fff;
text-align: center;
cursor: pointer;
}
#modal-bg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
}
#modal-container {
  position: absolute;
  top: 160px;
  left: 50%;
  background-color: #fff;
  padding: 40px;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0; 
  pointer-events: none; 
}
#modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
}
#modal-container input {
  width: 320px;
  margin-top: 20px;
  font-size: 12px;
  padding: 12px 12px;
  border: solid 1px #d0d5b8;
  border-radius: 5px;
}
#modal-bg.active {
  opacity: 1;
  transition: 1s;
  pointer-events: auto;
}
#modal-container.active {
  opacity: 1;
  transition: 1s;
  pointer-events: auto;
}

【js】

document.addEventListener('DOMContentLoaded',function(){

const open = document.getElementById('modal-open');
const container = document.getElementById('modal-container');
const modalBg = document.getElementById('modal-bg');
const close = document.getElementById('modal-close');

open.addEventListener('click',function(){
  container.classList.add('active');
  modalBg.classList.add('active');
})
close.addEventListener('click',function(){
  container.classList.remove('active');
  modalBg.classList.remove('active');
})
modalBg.addEventListener('click',function(){
  container.classList.remove('active');
  modalBg.classList.remove('active');
})
});

参考にしたコードは要素を隠すのに【opacity:0;】を使っていたので【display:none;】ではどのようになるのか見てみようと思います。