jQueryについて学習中。
今回はモーダルの表示について。
ほぼ自分の勉強メモです。
過度な期待はしないでください。
完成図
-こんなのを実装
-先ずはコードから（ほぼモーダルの部分のみ記載）
<header>
<div class="container">
<div class="header-left">
</div>
<div class="header-right">
<div class="login" id="login-show">ログイン</div>
</div>
</div>
</header>
<!--モーダルの部分のコード -->
<div class="login-modal-wrapper" id="login-modal">
<div class="modal">
<div class="close-modal" id="close-btn">
<i class="fa fa-2x fa-times"></i>
</div>
<div id="login-form">
<h2>Emailログイン</h2>
<form action="#">
<input class="form-control" type="text" placeholder="メールアドレス">
<input class="form-control" type="password" placeholder="パスワード">
<div id="submit-btn">ログイン</div>
</form>
</div>
</div>
</div>
/*モーダルの部分のCSS*/
.login-modal-wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 100;
display: none;
}
.modal {
position: absolute;
top: 20%;
left: 34%;
background-color: #e6ecf0;
padding: 20px 0 40px;
border-radius: 10px;
width: 450px;
height: auto;
text-align: center;
}
.fa-times {
position: absolute;
top: 12px;
right: 12px;
color: rgba(128, 128, 128, 0.46);
cursor: pointer;
}
# login-form {
width: 100%;
}
# login-form h2 {
color: #5f5d60;
letter-spacing: 1px;
margin-bottom: 40px;
}
# login-form input {
width: 320px;
margin-bottom: 20px;
font-size: 12px;
padding: 12px 12px;
border: 1px solid #d0d5d8;
border-radius: 5px;
}
# submit-btn {
display: inline-block;
padding: 14px 140px;
background-color: #5dca88;
border: none;
border-radius: 3px;
color: white;
margin: 10px auto;
cursor: pointer;
}
$(function() {
$('#login-show').click(function(){
$('#login-modal').fadeIn();
});
$('.close-modal').click(function(){
$('#login-modal').fadeOut();
});
});
モーダルを表示
- モーダルとは
-モーダルとは、clickイベントなどに基づいて、表示・非表示が行われる要素のことをいう。
今回は、ヘッダーにあるログインボタンをクリックすると、ログインフォームが表示されるというもの。
実装するには、3つのステップで行う。
・モーダルをCSSで非表示にする
・ログインボタンにクリックイベントを設定
・クリックイベントでモーダルを表示
一つずつ解説
- モーダルをCSSで非表示にする
-HTMLで作成したモーダル部分を、display: none;で隠す。
コードではこの部分
<div class="login-modal-wrapper" id="login-modal">
<div class="modal">
<div class="close-modal" id="close-btn">
<i class="fa fa-2x fa-times"></i>
</div>
<div id="login-form">
<h2>Emailログイン</h2>
<form action="#">
<input class="form-control" type="text" placeholder="メールアドレス">
<input class="form-control" type="password" placeholder="パスワード">
<div id="submit-btn">ログイン</div>
</form>
</div>
</div>
</div>
.login-modal-wrapper {
/* 省略*/
display: none;
}
- ログインボタンにクリックイベントを設定
-イベントの構文は、$('セレクタ').イベント名(function(){ });のように書く
セレクタには、ログインボタンのidを指定 <div class="login" id="login-show">ログイン</div>
ちなみに、idをセレクタにするには、id名の前にはシャープ（#）を使用する。
$('#login-show').click(function(){
});
- クリックイベントでモーダルを表示
-jQueryの書き方は、$('セレクタ').メソッド（引数）;
ログインボタンをクリックしたら、display: none;で隠した要素を
fadeInメソッドを使用して表示させる。
ちなみに、要素を表示させる際classではなく、idを指定しているのは、
この部分 <div class="login-modal-wrapper" id="login-modal">
セレクタには、classを指定してもいいのだが、idは同一ページに一箇所しか存在しないので、
jQueryの処理が高速化されるので、jQueryオブジェクトのセレクタにはできるだけidを使用した方が良い。
$('#login-show').click(function(){
$('#login-modal').fadeIn();
});
モーダルを非表示
-表示させたモーダルを、閉じるボタンをクリックした時に、モーダルが閉じるようにする。
閉じるボタンにclickイベントを設定し、fadeOutメソッドでモーダルを非表示にする。
-実装するステップ
・閉じるボタンにクリックイベントを設定
・fadeOutメソッドでモーダルを隠す
// 閉じるボタンにクリックイベントを設定
$('#close-btn').click(function(){
// fadeOutメソッドでモーダルを隠す
$('#login-modal').fadeOut();
});
これで実装完了です。
補足
- position: fixed;
-絶対位置への配置となるが、スクロールしても位置が固定されたままとなる。
似たものとして、position: absolute;があるが、こちらはスクロールしても固定されない。
- cursor: pointer;
-cursorプロパティは、マウスカーソルの形状を指定する際に使用
他にも色んなカーソルがあるので下記の記事を参照
cursorの解説
- letter-spacing:
-letter-spacingプロパティは、文字の間隔を指定する際に使用。
文字の間隔にはマイナスの値を指定することも可能。
- color: rgba( )
-RGBAカラーモデルは、RGBカラーモデルのred・green・blueに、alphaが加わったもの。
alphaは色の透明度を表す。
RGBAカラーモデルで色を指定する際には、カンマ（ , ）区切りにした３つの数値でRGBの色を指定。
RGBの色は0-255、または、0%-100%で指定。透明度は、0（完全に透明）～1（完全に不透明）の数値で指定。
<i class="fa fa-times"></i>