画面中央に配置するモーダルウィンドウの作り方

モーダルウィンドウとは、会員登録ボタンを押した時や、画像を押した時、エラーを知らせる時などにポップアップで表示されるものをモーダルウィンドウといいます。

プラグインもありますが、今回はjQueryを使ってモーダルウィンドウを実装する方法をご紹介します。

デモページ

まずはデモページを見て見ましょう。

HTML

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="js/script.js"></script>
    <title>モーダルウィンドウの実装</title>
  </head>
  <body>
    <div class="top_container">
      <div class="main_img">
        <div class="top_inner">
          <h1>Life isn’t about finding yourself. <br>Life is about creating yourself.</h1>
          <div class="login_btn">ログイン</div>
        </div>
      </div>
    </div>
    <!--モーダル部分-->
    <div class="modal_wrap" id="signup_modal">
      <div class="modal_inner">
        <div class="close_icon">
          <i class="far fa-times-circle"></i>
        </div>
        <div class="signup_form">
          <h2>ログイン</h2>
          <form>
            <input type="text" placeholder="メールアドレス" class="form_control">
            <input type="password" placeholder="パスワード" class="form_control">
            <div class="submit_btn">ログイン</div>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

@charset "UTF-8";

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

img{
  display: block;
}

.all_wrap{
  max-width: 1170px;
  margin:0 auto;
}

.main_img{
  background-image: url(img/main.jpg);
  background: linear-gradient(25deg, rgba(255, 0, 0, 0.4), rgba(0, 255, 0, 0.4)) ,url(img/main.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100vh;
  display: table;
}

.top_inner{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

h1{
  color: #ffffff;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.login_btn{
  background:#eeeeee;
  width: 300px;
  text-align: center;
  margin:0 auto;
  padding:10px;
  border-radius: 10px;
  cursor: pointer;
}

/********背景黒**********/
.modal_wrap{
  position: fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
  display: none;
}

/**ログインボタン押した後に出てくるモーダル**/
.modal_inner{
  background:#cccccc;
  width: 400px;
  margin:0 auto;
  text-align: center;
  padding:20px;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  transform:translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
}

.close_icon{
  position: relative;
  cursor: pointer;
}

.close_icon i{
  position: absolute;
  right: 0;
}

h2{
  font-size: 20px;
  margin-bottom: 20px;
}

.form_control{
  display: block;
  margin:10px auto;
  width: 80%;
  height: 25px;
}

.submit_btn{
  width: 60%;
  background:#FF5192;
  margin:0 auto;
  color: #ffffff;
  padding:5px;
  border-radius: 5px;
  cursor: pointer;
}

jQuery

$(function(){
  $('.login_btn').click(function(){
    $('#signup_modal').fadeIn();
  });

  $('.close_icon').click(function(){
    $('#signup_modal').fadeOut();
  });
});