モーダルウィンドウのJqueryでの表示/非表示の切り替え法
解決したいこと
モーダルウィンドウのJqueryでの表示/非表示の切り替え法
現在、簡単なログイン機能ありのサイトを作成しており、
サインインボタンをクリックしてログインフォームを表示させるようにJqueryでコーディングしています。
発生している問題・エラー
ログインフォームをモーダルウィンドウで表示させたいのですが、表示/非表示の切り替えが上手くいかず悩んでいます。
Jqueryでは変数checkを用意して、そこにモーダルウィンドウがshowのときに１、hideのときに０になるようにif文で定義しています。
また、元々CSSにてモーダルウィンドウは{display:none}を指定しています。
$(function(){
var check = 0;
if (check = 0){
$('.signin, .sp_signin').click(function(){
$('open-modal').show();
check = 1;
});
}else if(check = 1){
$(document).click(function(e) {
if(!$(e.target).closest('#signin_box').length) {
$('open-modal').hide();
}
});
check = 0;
}
});
.signin, .sp_signinはサインインボタン
open-modalはモーダルウィンドウ
#signin_boxはログインフォームです。
試したこと
$('.signin, .sp_signin').click(function(){
$('open-modal').show();
check = 1;
});
上記のコードのみで実行した際はサインインボタンを押すとモーダルウィンドウが表示され、上手く作動しました。
また、モーダルウィンドウのCSSの{display:none}を{display:block}に変えて
最初から表示されるようにして
$(document).click(function(e) {
if(!$(e.target).closest('#signin_box').length) {
$('open-modal').hide();
}
上記のコードを実行したときもちゃんとログインフォーム以外をクリックしたらモーダルウィンドウが閉じられるよう作動していました。
おそらく、if文にした時の構文の何かが原因になっているのはわかるのですが、勉強不足につきそこまでの予測しか立てられず困っております。
何かご助言いただけると幸いです。
0
