【js】新規登録ボタンを押した時、「モーダルウインドウが表示されるようにする
新規登録とかログインのボタンを押した時、表示される画面ってとても魅力的ではないですか？
jsで組み込もうとすると、「クリックされた時は〜」とか考え込むともう頭がパンク😅
ということで、ぼくとしてはめちゃくちゃスマートに作れたので紹介します！
完成系
コードはこちら
// 新規登録ボタンをクリックした時
$(function(){
$('.acount_sign').click(function(){
$('.display_signin').toggleClass('show');
$('.display_login').removeClass('show');
});
// ログインボタンをクリックした時
$('.acount_login').click(function(){
$('.display_login').toggleClass('show');
$('.display_signin').removeClass('show');
});
});
// アカウントの所持によって切り替える
$(function(){
$('.help_signin p span').click(function(){
$('.display_login').toggleClass('show');
$('.display_signin').removeClass('show');
});
$('.help_login p span').click(function(){
$('.display_signin').toggleClass('show');
$('.display_login').removeClass('show');
});
});
// 画面を閉じるボタンをクリックされた時
$(function(){
$('.back').click(function(){
$('.display_signin').removeClass('show');
$('.display_login').removeClass('show');
});
});
ちなみに、htmlはこちら
<div class="display_login">
<div class="w-80 mt-3">
<h2>新規登録</h2>
<input type="email">
<input type="pass">
<p>アカウントお持ちですか？ <span>ログイン</span></p>
</div>
</div>
<div class="display_signin">
<div class="w-80 mt-3">
<h2>ログイン</h2>
<input type="email">
<input type="pass">
<p>アカウントお持ちでないですか？ <span>新規登録</span></p>
</div>
</div> 準備するもの
読み込んでいるstyle.cssとか同じ<head>ないに記述してください。
コードはjQueryを利用しています。
※これ入れるだけで使えるようになります。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>記述の形
$(function(){
// クリックした時
$('.or#該当する要素').click(function(){
//ここに変化した内容を記述
// $('.or#該当する要素').toggleClass('付けたいクラス');
});
});toggleClassとは
クラスがついているかついていないかで、自動的に判断してくれるめっちゃ頼りになる機能。
例えば、表示したいだけであれば「addClass(クラスをつける)」だけでもいいです。
操作に慣れていない方だと、画面を消すために同じボタンをクリックする可能性がありクリックしても消えないとパニックになると思ったため「toggleClass」です。
これにより、表示非表示どちらも可能にしてくれます。
removeClassとは
ついたクラスを消してくれるものです。
戻りたい時にbackボタンを、
ログインと間違えて新規登録を、
新規登録と間違えてログインを？
なんて感じで、表示された状態で他の画面を押すと被って表示されてしまいます。
結果、よくわからないけど登録画面が残っている状態になり見たいものも見られなくなります。
表示させる
画面を作っていきましょう。
参考完成系では左右に余白がありますが、画面いっぱいに表示させる方法も紹介します。
// 画面いっぱい
.show {
height: 120%;
width: 100%;
position: fixed;
z-index: 9999;
}
// 余白がある
.show {
height: 120%;
width: 80%;
margin: 0 auto;
position: fixed;
z-index: 9999;
}ここでは、height: 120%;と少し多く高さを上げています。
これによりスマホ版でも検索バナーが無くなった時見切れず表示されるようになります。
また備考に利用したcssを紹介します。
position: fixed;
→固定化することで、下にスクロールしても画面から動かなくなります。
z-index: 9999;
→最大9999です。表示順序を示していて、多ければ多いほど上に表示されるものとして認識されます。
また、表示順序自体position系を使わないと効果がありません。
この要素を1番上に表示させたいと思った場合、必ずpositionと一緒に利用しましょう。
アニメーションをつけたい場合
クリックした時に、中央から出現するタイプを紹介します。
コードはこちら
/* cssシート */
.display_signin {
opacity: 0;
width: 45%;
height: 80%;
/*
見た目
background-color: #FFF;
border: 1px solid #808080;
border-radius: 50px;
*/
position: fixed;
z-index: 9999;
transition: 0.3s;
}
.display_login {
opacity: 0;
width: 45%;
height: 80%;
/*
見た目
background-color: #FFF;
border: 1px solid #808080;
border-radius: 50px;
*/
position: fixed;
z-index: 9999;
transition: 0.5s;
}
.show {
opacity: 1;
margin-top: 30px;
width: 90%;
height: 120%;
}新規登録を「display_signin」
ログインを「display_login」
としています。
「show」というクラスがついた時、表示され横幅と縦幅が変わる仕組みになっています。
また「 transition: 0.5s;」を利用することで変化するときに時間というものを作ることができます。
「このくらいのスピードで表示して欲しい！」というのを実現してくれます。
注意点
文字が表示された枠を最大限に活用したいという気持ちで
「width: auto;」や「width: auto;」とか使うと、効果が出ないため気をつけてください。
しっかりと数字を固定にすることで表示されるようになります。
まとめ
jsを使ったモーダルウィンドウについて紹介しました。
お疲れ様です😅
html文章を
cssで見た目を
jsで起動させる
この役割をうまく活用して、いろんな場面でモーダルウィンドウを使っていきましょう！
ありがとうございました！
この記事が気に入ったらサポートをしてみませんか？