【jQuery】모달(표시·숨기기), 송신 버튼을 누르면 window 경고를 표시시킨다.
소개
해마다 다양한 기업·지방공공단체의 사이트 만들기가 세련되어 왔다고 생각합니다. 작은 현지 가게에서도 동적이고 풍부한 홈페이지를 가지고 있거나.
그런 사이트를 만드는데 있어서 필수의 프런트 엔드 언어의 힘을 붙이고 싶다고 느꼈기 때문에, 이번은 jQuery의 기사를 올리고 싶습니다.
이번에는, 「모달」과 「window 경보」의 작성에 초점을 맞추고 싶습니다.
구현 전 사이트(before)
아래 그림과 같은 라면 가게의 사이트에 구현하고 있습니다.
문의 양식을 모달로 표시/숨길 수 있도록 합니다.
※「송신 버튼」에는 이미 jQuery의 기능 중 하나인 mouseenter와 mouseleave가 구현되어 있습니다. 이것에 대한 설명은 생략합니다.
STEP1:jQuery와 .js 파일 읽기
우선, jQuery의 읽기를 html 파일에 기입합니다. 또, Javascript 라이브러리의 하나인 jQuery의 코드는, script.js 파일에 별도 기술합니다.
<!DOCTYPE html>
<html>
<head>
<!--省略 -->
<head>
<body>
<!--表示するサイトのコード部分。省略。-->
<!--jQueryライブラリの読み込み。-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>
<!--処理速度を速くするため、また可読性を上げるため、jQueryの記述は、jsファイルに分けた。-->
<script src = "script.js"></script>
</body>
</html>
STEP2：각각의 코드를 쓴다
여기에서는 .html, .css, .js 각각에 코드를 써 갑니다.
STEP2-1:html
중요한 포인트
・「문의 폼은 이쪽」이라고 하는 버튼을 새롭게 마련해, 그것을 div 태그로 둘러싸고, 부여한 id로 클릭 이벤트를 발화시킨다.
· 표시된 모달을 닫기위한 이벤트로서 "x"버튼 (닫기 버튼)이 새로 제공됩니다.
※ 정해진 개소에서 표시·비표시를 시키기 위해, class가 아니고 id를 부여하는 것을 추천합니다.
"송신"버튼을 누르면 윈도우 알람이 나오도록 위와 같이 버튼을 div 태그로 둘러싸는 id를 부여합니다.
<!DOCTYPE html>
<html>
<head>
<!--省略 -->
<head>
<body>
<!--表示するサイトのコード部分。省略。-->
<!--ここからモーダル表示・非表示-->
<!--お問い合わせフォームボタンを作成。ボタンをクリックしたときに発火させるため、idとclassを付けた。-->
<div id="inquire_show" class="submit"><button type="submit" class="inquire_btn">お問い合わせフォームはこちら</button></div>
<!--ボタンクリック前までは、CSS上の記述「display:none;」で非表示になっている部分＝モーダル-->
<div id="inquire_modal" class="inquire_modal_wrapper">
<div class="modal">
<!--モーダル部分の閉じるボタン。-->
<div id="close_modal">
<i class="close_btn">×</i>
</div>
<!--以下、お問い合わせフォーム本体-->
<article class="content">
<!--このarticleタグにはモーダルしたい部分を記述。-->
</article>
</div>
</div>
</div>
<footer class="footer">
<!--フッターの記述。省略。-->
</footer>
</div>
<!--jQueryライブラリの読み込み。STEP１と同じなので省略。-->
</body>
</html>
STEP2－2：css
중요한 포인트
・당연히, 모달 본체는 비표시 상태가 디폴트이기 때문에, display: none;로 하는 것.
・클릭 이벤트로 발화했을 때에, 최상면에 떠오르게 하기 위해, z-index: 100;로 한다. (100이 아니어도 좋지만, 다른 것보다 높은 값으로 하는 것.)
・닫는 버튼 「x」는 그대로라면 너무 작기 때문에, font-size는 크게.
・문의 폼의 폭은, 자세하게 프리뷰 해 보면서 조절하는 것.
※normalize.css의 기술은 할애합니다.
"normalize.css"는 리셋 css의 일부입니다. 【참고 URL】 h tps : // 괜찮아. k wl. jp/3441/
/*「問い合わせフォームはこちら」ボタン*/
.inquire_btn {
background-color: #cf5555;
padding: 10px 20px;
color: white;
}
/*モーダル本体の背景色やz-indexの設定。もちろん、displayはnoneにする。*/
.inquire_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: 25%;
background-color: #e6ecf0;
padding: 20px 0 20px;
border-radius: 10px;
width: 800px;
height: auto;
text-align: center;
}
/*閉じるボタン「X」の設定。右上に設置したり、ボタンを大きくしたり。*/
.close_btn {
margin-right: 5px;
position: absolute;
top: 12px;
right: 12px;
color: rgba(128, 128, 128, 0.46);
cursor: pointer;
font-size: 3rem;
}
STEP2－3：js
$(function() {
//モーダルの表示・非表示
$('#inquire_show').on('click', function(){
$('#inquire_modal').fadeIn();
});
$('#close_modal').on('click', function(){
$('#inquire_modal').fadeOut();
});
//「送信」ボタンを押したときにアラームを表示するイベント。
$('.btn').on('click',function(){
window.alert("お問い合わせくださりありがとうございます！");
//本旨から外れますが、「送信」ボタンの色をマウスを乗せたり外すと変えるイベント
$('.btn').on('mouseenter', function(){
$(this).css('background-color', '#873955');
})
.on('mouseleave', function(){
$(this).css('background-color', '#0074bf');
});
});
});
구현 후 사이트(after)
참고(github)
이번 페이지에 대해서는, github상에도 게재했습니다. 원한다면 들여다보십시오.
htps : // 기주 b. 코 m / 엔조 y-se lf - 힘든 ry / 다 y3_ 카다이_ 오 p 치오. 기 t
Reference
이 문제에 관하여(【jQuery】모달(표시·숨기기), 송신 버튼을 누르면 window 경고를 표시시킨다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tkym_2020/items/8566937f732f065a7895
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
아래 그림과 같은 라면 가게의 사이트에 구현하고 있습니다.
문의 양식을 모달로 표시/숨길 수 있도록 합니다.
※「송신 버튼」에는 이미 jQuery의 기능 중 하나인 mouseenter와 mouseleave가 구현되어 있습니다. 이것에 대한 설명은 생략합니다.
STEP1:jQuery와 .js 파일 읽기
우선, jQuery의 읽기를 html 파일에 기입합니다. 또, Javascript 라이브러리의 하나인 jQuery의 코드는, script.js 파일에 별도 기술합니다.
<!DOCTYPE html>
<html>
<head>
<!--省略 -->
<head>
<body>
<!--表示するサイトのコード部分。省略。-->
<!--jQueryライブラリの読み込み。-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>
<!--処理速度を速くするため、また可読性を上げるため、jQueryの記述は、jsファイルに分けた。-->
<script src = "script.js"></script>
</body>
</html>
STEP2：각각의 코드를 쓴다
여기에서는 .html, .css, .js 각각에 코드를 써 갑니다.
STEP2-1:html
중요한 포인트
・「문의 폼은 이쪽」이라고 하는 버튼을 새롭게 마련해, 그것을 div 태그로 둘러싸고, 부여한 id로 클릭 이벤트를 발화시킨다.
· 표시된 모달을 닫기위한 이벤트로서 "x"버튼 (닫기 버튼)이 새로 제공됩니다.
※ 정해진 개소에서 표시·비표시를 시키기 위해, class가 아니고 id를 부여하는 것을 추천합니다.
"송신"버튼을 누르면 윈도우 알람이 나오도록 위와 같이 버튼을 div 태그로 둘러싸는 id를 부여합니다.
<!DOCTYPE html>
<html>
<head>
<!--省略 -->
<head>
<body>
<!--表示するサイトのコード部分。省略。-->
<!--ここからモーダル表示・非表示-->
<!--お問い合わせフォームボタンを作成。ボタンをクリックしたときに発火させるため、idとclassを付けた。-->
<div id="inquire_show" class="submit"><button type="submit" class="inquire_btn">お問い合わせフォームはこちら</button></div>
<!--ボタンクリック前までは、CSS上の記述「display:none;」で非表示になっている部分＝モーダル-->
<div id="inquire_modal" class="inquire_modal_wrapper">
<div class="modal">
<!--モーダル部分の閉じるボタン。-->
<div id="close_modal">
<i class="close_btn">×</i>
</div>
<!--以下、お問い合わせフォーム本体-->
<article class="content">
<!--このarticleタグにはモーダルしたい部分を記述。-->
</article>
</div>
</div>
</div>
<footer class="footer">
<!--フッターの記述。省略。-->
</footer>
</div>
<!--jQueryライブラリの読み込み。STEP１と同じなので省略。-->
</body>
</html>
STEP2－2：css
중요한 포인트
・당연히, 모달 본체는 비표시 상태가 디폴트이기 때문에, display: none;로 하는 것.
・클릭 이벤트로 발화했을 때에, 최상면에 떠오르게 하기 위해, z-index: 100;로 한다. (100이 아니어도 좋지만, 다른 것보다 높은 값으로 하는 것.)
・닫는 버튼 「x」는 그대로라면 너무 작기 때문에, font-size는 크게.
・문의 폼의 폭은, 자세하게 프리뷰 해 보면서 조절하는 것.
※normalize.css의 기술은 할애합니다.
"normalize.css"는 리셋 css의 일부입니다. 【참고 URL】 h tps : // 괜찮아. k wl. jp/3441/
/*「問い合わせフォームはこちら」ボタン*/
.inquire_btn {
background-color: #cf5555;
padding: 10px 20px;
color: white;
}
/*モーダル本体の背景色やz-indexの設定。もちろん、displayはnoneにする。*/
.inquire_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: 25%;
background-color: #e6ecf0;
padding: 20px 0 20px;
border-radius: 10px;
width: 800px;
height: auto;
text-align: center;
}
/*閉じるボタン「X」の設定。右上に設置したり、ボタンを大きくしたり。*/
.close_btn {
margin-right: 5px;
position: absolute;
top: 12px;
right: 12px;
color: rgba(128, 128, 128, 0.46);
cursor: pointer;
font-size: 3rem;
}
STEP2－3：js
$(function() {
//モーダルの表示・非表示
$('#inquire_show').on('click', function(){
$('#inquire_modal').fadeIn();
});
$('#close_modal').on('click', function(){
$('#inquire_modal').fadeOut();
});
//「送信」ボタンを押したときにアラームを表示するイベント。
$('.btn').on('click',function(){
window.alert("お問い合わせくださりありがとうございます！");
//本旨から外れますが、「送信」ボタンの色をマウスを乗せたり外すと変えるイベント
$('.btn').on('mouseenter', function(){
$(this).css('background-color', '#873955');
})
.on('mouseleave', function(){
$(this).css('background-color', '#0074bf');
});
});
});
구현 후 사이트(after)
참고(github)
이번 페이지에 대해서는, github상에도 게재했습니다. 원한다면 들여다보십시오.
htps : // 기주 b. 코 m / 엔조 y-se lf - 힘든 ry / 다 y3_ 카다이_ 오 p 치오. 기 t
Reference
이 문제에 관하여(【jQuery】모달(표시·숨기기), 송신 버튼을 누르면 window 경고를 표시시킨다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tkym_2020/items/8566937f732f065a7895
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<!--省略 -->
<head>
<body>
<!--表示するサイトのコード部分。省略。-->
<!--jQueryライブラリの読み込み。-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>
<!--処理速度を速くするため、また可読性を上げるため、jQueryの記述は、jsファイルに分けた。-->
<script src = "script.js"></script>
</body>
</html>
여기에서는 .html, .css, .js 각각에 코드를 써 갑니다.
STEP2-1:html
중요한 포인트
・「문의 폼은 이쪽」이라고 하는 버튼을 새롭게 마련해, 그것을 div 태그로 둘러싸고, 부여한 id로 클릭 이벤트를 발화시킨다.
· 표시된 모달을 닫기위한 이벤트로서 "x"버튼 (닫기 버튼)이 새로 제공됩니다.
※ 정해진 개소에서 표시·비표시를 시키기 위해, class가 아니고 id를 부여하는 것을 추천합니다.
"송신"버튼을 누르면 윈도우 알람이 나오도록 위와 같이 버튼을 div 태그로 둘러싸는 id를 부여합니다.
<!DOCTYPE html>
<html>
<head>
<!--省略 -->
<head>
<body>
<!--表示するサイトのコード部分。省略。-->
<!--ここからモーダル表示・非表示-->
<!--お問い合わせフォームボタンを作成。ボタンをクリックしたときに発火させるため、idとclassを付けた。-->
<div id="inquire_show" class="submit"><button type="submit" class="inquire_btn">お問い合わせフォームはこちら</button></div>
<!--ボタンクリック前までは、CSS上の記述「display:none;」で非表示になっている部分＝モーダル-->
<div id="inquire_modal" class="inquire_modal_wrapper">
<div class="modal">
<!--モーダル部分の閉じるボタン。-->
<div id="close_modal">
<i class="close_btn">×</i>
</div>
<!--以下、お問い合わせフォーム本体-->
<article class="content">
<!--このarticleタグにはモーダルしたい部分を記述。-->
</article>
</div>
</div>
</div>
<footer class="footer">
<!--フッターの記述。省略。-->
</footer>
</div>
<!--jQueryライブラリの読み込み。STEP１と同じなので省略。-->
</body>
</html>
STEP2－2：css
중요한 포인트
・당연히, 모달 본체는 비표시 상태가 디폴트이기 때문에, display: none;로 하는 것.
・클릭 이벤트로 발화했을 때에, 최상면에 떠오르게 하기 위해, z-index: 100;로 한다. (100이 아니어도 좋지만, 다른 것보다 높은 값으로 하는 것.)
・닫는 버튼 「x」는 그대로라면 너무 작기 때문에, font-size는 크게.
・문의 폼의 폭은, 자세하게 프리뷰 해 보면서 조절하는 것.
※normalize.css의 기술은 할애합니다.
"normalize.css"는 리셋 css의 일부입니다. 【참고 URL】 h tps : // 괜찮아. k wl. jp/3441/
/*「問い合わせフォームはこちら」ボタン*/
.inquire_btn {
background-color: #cf5555;
padding: 10px 20px;
color: white;
}
/*モーダル本体の背景色やz-indexの設定。もちろん、displayはnoneにする。*/
.inquire_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: 25%;
background-color: #e6ecf0;
padding: 20px 0 20px;
border-radius: 10px;
width: 800px;
height: auto;
text-align: center;
}
/*閉じるボタン「X」の設定。右上に設置したり、ボタンを大きくしたり。*/
.close_btn {
margin-right: 5px;
position: absolute;
top: 12px;
right: 12px;
color: rgba(128, 128, 128, 0.46);
cursor: pointer;
font-size: 3rem;
}
STEP2－3：js
$(function() {
//モーダルの表示・非表示
$('#inquire_show').on('click', function(){
$('#inquire_modal').fadeIn();
});
$('#close_modal').on('click', function(){
$('#inquire_modal').fadeOut();
});
//「送信」ボタンを押したときにアラームを表示するイベント。
$('.btn').on('click',function(){
window.alert("お問い合わせくださりありがとうございます！");
//本旨から外れますが、「送信」ボタンの色をマウスを乗せたり外すと変えるイベント
$('.btn').on('mouseenter', function(){
$(this).css('background-color', '#873955');
})
.on('mouseleave', function(){
$(this).css('background-color', '#0074bf');
});
});
});
구현 후 사이트(after)
참고(github)
이번 페이지에 대해서는, github상에도 게재했습니다. 원한다면 들여다보십시오.
htps : // 기주 b. 코 m / 엔조 y-se lf - 힘든 ry / 다 y3_ 카다이_ 오 p 치오. 기 t
Reference
이 문제에 관하여(【jQuery】모달(표시·숨기기), 송신 버튼을 누르면 window 경고를 표시시킨다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tkym_2020/items/8566937f732f065a7895
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
이번 페이지에 대해서는, github상에도 게재했습니다. 원한다면 들여다보십시오.
htps : // 기주 b. 코 m / 엔조 y-se lf - 힘든 ry / 다 y3_ 카다이_ 오 p 치오. 기 t
Reference
이 문제에 관하여(【jQuery】모달(표시·숨기기), 송신 버튼을 누르면 window 경고를 표시시킨다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tkym_2020/items/8566937f732f065a7895텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
