ChatGPTを使ってJavaScript(jQuery)でモーダルを作ったときの指示方法など
最近ようやく実務でChatGPTを使い始めました。
今回は、モーダルを作ったときにChatGPTに指示した内容と、自分で用意したコードを紹介します。
前提条件
・ボタン部分のHTMLのみ自分で用意
・jQueryで出力したい
・CSSはSCSSの記法
用意したHTML
<a href="#" class="select-box-ttl-span">底板の選び方ガイド</a>
用意したのはボタン部分のこれだけです。
ChatGPTへの指示内容
<a href=”#” class=”select-box-ttl-span”>最適な底板の選び方</a>をクリックしたらモーダルが表示されるようにhtmlとcss(scss記法)とjqueryをください。
htmlの中身はul >li で、liが5つ並んでいたらOKで、右上にモーダルを閉じるためのバツボタンがほしい。
jqueryは、<a href=”#” class=”select-box-ttl-span”>最適な底板の選び方</a>をクリックしたらモーダルが開き、右上のバツボタンと、モーダル外のどこを押してもモーダルが閉じる、モーダルが開くときはちょっとふわっと開く(適度に)
このモーダルは中央に配置しつづけて、モーダル内でスクロールできるようにしてほしい。
背景はスクロールされないように固定してください。
↑これをお願いしてみたら帰ってきたのがこちら
<a href="#" class="select-box-ttl-span">最適な底板の選び方</a>
<div class="modal-overlay"></div>
<div class="modal">
<button class="modal-close">×</button>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(51, 51, 51, 0.3);
z-index: 999;
}
.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
max-width: 500px;
max-height: 80%;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
overflow-y: auto; /* モーダル内でスクロールを可能に */
.modal-close {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
}
}
$(document).ready(function() {
// モーダルを開く
$('.select-box-ttl-span').on('click', function(event) {
event.preventDefault();
$('body').css('overflow', 'hidden'); // 背景のスクロールを無効化
$('.modal-overlay').fadeIn();
$('.modal').css('transform', 'translate(-50%, -50%) scale(0.8)').show().animate({
opacity: 1,
transform: 'translate(-50%, -50%) scale(1)'
}, 300);
});
// モーダルを閉じる
$('.modal-close, .modal-overlay').on('click', function() {
$('.modal').animate({
opacity: 0,
transform: 'translate(-50%, -50%) scale(0.8)'
}, 300, function() {
$(this).hide();
$('body').css('overflow', ''); // 背景のスクロールを再度有効化
});
$('.modal-overlay').fadeOut();
});
});
この3つのファイルで最低限のモーダルが完成しました。
あとは、必要に応じてHTMLの中身とCSSを追記していくような流れです。
実際に作成したモーダルはこちらのページにあります。
https://cs-rack.com/kago_daisha#kago-choice
ここで作っている絞り込み検索の部分もChatGPTで出力したjsを使いましたが、ブログに載せるにはコードが長すぎたので、また機会があればそちらも書きます。
このカテゴリの最新記事
2024.04.12
2024.03.22
2024.04.24
2024.10.09