【progate備忘録】　Jquery　モーダルの実装

1.モーダルが表示されているので、非表示に。

display:none;を追加。

.signup-modal-wrapper {
 display:none;
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: rgba(0, 0, 0, 0.6);
 z-index: 100;
}

2.指定箇所をクリックすると、表示されるようにする

ポイント　

.signup-showをクリックすると、#signup-modalが表示される

$('.signup-show').click(function(){
$('#signup-modal').fadeIn();
});
$('.message').click(function(){
$('#signup-modal').fadeIn();
});

3.閉じるボタンを押すと、指定箇所が非表示になるようにする

ポイント

#close-modalをクリックすると、#signup-modalが非表示になる

$('#close-modal').click(function(){
 $('#signup-modal').fadeOut();
});