モーダルウィンドウとは、会員登録ボタンを押した時や、画像を押した時、エラーを知らせる時などにポップアップで表示されるものをモーダルウィンドウといいます。
プラグインもありますが、今回は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();
});
});
ブラウザで表示
トップページ「ログイン」に”login_btn”というclass名を付け、それを押すと”signup_modal”というidのついたモーダル部分がフェードインされるようにします。
モーダル画面で右上の✖️ボタンを押すとモーダルが閉じるように、✖️ボタンに”close_icon”というclassをつけます。それを押すと”signup_modal”がフェードアウトします。
これで完成です。