js imgを使ったaタグクリック時にfadeOutしたい

回答率: 85.48%

質問するログイン新規登録

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

新規登録して質問してみよう

ただいま回答率: 85.48%

トップ CSS3に関する質問

Q&A

解決済

1回答

923閲覧

js imgを使ったaタグクリック時にfadeOutしたい

総合スコア103

0グッド

0クリップ

投稿2021/12/28 11:37

0

0

前提・実現したいこと

表題の通り、aタグで囲まれたimgをクリック時に、FadeOUt()させたい

試したこと

closeのclassをチェックしましたが、aタグ　class＝js-modal-close確認済みですが、
fadeOut()できない

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4	<title></title>
5	<link href="./Top/asset/css/destyle.css" rel="stylesheet">
6	<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"><!--flatpicker-->
7	<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
8	<script src="https://cdn.jsdelivr.net/npm/flatpickr">
9	</script>
10	<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js">
11	</script><!-- 日本語化 -->
12	<link href="./Top/asset/css/style.css" rel="stylesheet">
13
14</head>
15<body>
16	<header class="header">
17		<div class="header-inner">
18			<div class="header-left">
19				<h1 class="logo"><a href="#"><img alt="" class="header-logo" src="./asserts/img/top-header-logo.png"></a></h1>
20				<nav class="nav drawer-nav">
21					<ul class="header-list">
22						<li class="header-item">
23							<a href="./Room/room.html">お部屋</a>
24						</li><!-- /.header-item -->
25						<li class="header-item">
26							<a href="./Menu/menu.html">お料理</a>
27						</li><!-- /.header-item -->
28						<li class="header-item">
29							<a href="./Onsen/onsen.html">温泉</a>
30						</li><!-- /.header-item -->
31					</ul><!-- /.header-list -->
32				</nav><!-- /.nav -->
33			</div>
34			<div class="header-right">
35				<div class="header-link" id="js-modal">
36					<a class="calender-link js-modal-open" href="#"><!-- <img src="./img/calender.png" alt="カレンダー"> -->
37					 宿泊予約</a>
38				</div><!-- /.header-link -->
39				<button aria-controls="js-glabal-menu" aria-expanded="false" class=" humburger" id="js-humburger" type="button"><span class="line"></span><span class="line"></span><span class="line"></span></button>
40			</div><!-- /.header-right -->
41		</div><!-- /.header-inner -->
42	</header><!-- /.header -->
43	<div class="overlay"></div><!-- /.overlay -->
44	<!--modal  -->
45	<div class="modal js-modal">
46		<div class="modal__bg js-modal-close"></div><!-- /.modal__bg -->
47		<div class="js-modal-content">
48			<div class="form-inner">
49				<figure class="form_img" id="js-close-calender">
50					<a class="js-modal-close close-img" href="#"><img alt="✖ボタン" src="./asserts/img/close.png"></a>
51				</figure><!-- /#js-close-calender -->
52				<h2 class="form-ttl">宿泊予約</h2><!-- /.form-ttl -->
53				<hr class="bar">
54				<!-- modal-form -->
55				<form action="x" class="form" id="js-form" name="js-form">
56					<ul class="form-list">
57						<!--1-->
58						<li class="form-item"><label class="form-label" for="name">お名前</label> <input class="form_txt" name="name" placeholder="例:石井花壇" type="text"></li><!-- /.form-item -->
59						<!--2-->
60						<li class="form-item"><label class="form-label" for="mail">メールアドレス</label> <input class="form_txt" name="name" placeholder="例:example@example.com" type="text"></li><!--3-->
61						<li class="form-item"><label class="form-plan form-label">ご希望プラン(空いているプランのみ表示されます)</label><!-- /.form-plan -->
62						 <select class="select-plan" name="宿泊プラン">
63							<optgroup>
64								<option class="form_opption" value="hidden selected">
65									プランを選択してください
66								</option>
67								<option class="form_opption" value="1">
68									➀【期間限定】海辺の四季旬彩、贅沢美味懐石プラン
69								</option><!-- /.form_opption -->
70								<option class="form_opption" value="2">
71									➁平日に優雅に楽しむ、特別宿泊プラン
72								</option><!-- /.form_opption -->
73								<option class="form_opption" value="3">
74									➂絶景貸切露天と個室会席を楽しむファミリープラン
75								</option><!-- /.form_opption -->
76							</optgroup>
77						</select><!-- /# --></li><!-- /.form-item -->
78						<!--4-->
79						<li class="form-item"><label class="form-label" for="js-flatpickr">日時選択<input class="flatpickr" placeholder="日時を選択してください" readonly="readonly" type="text"></label></li><!-- /.form-item -->
80					</ul><!-- /.form-list -->
81				</form><!-- /.form -->
82			</div><!-- /.form-inner -->
83			<div class="form-close">
84				<a href="#">送信する</a>
85			</div><!-- /.form-close -->
86		</div><!-- /.modal-contents -->
87	</div><!-- /.modal -->
88
89　　　　　<script src="./Top/Js/jquery-3.6.0.min.js"></script> 
90	<script src="./Top/Js/script.js"></script>
91
92</body>
93</html>

CSS
1.overlay {
2  content: "";
3  display: block;
4  width: 0;
5  height: 0;
6  background-color: rgba(0, 0, 0, 0.5);
7  position: absolute;
8  top: 0;
9  left: 0;
10  z-index: 2;
11  opacity: 0;
12  -webkit-transition: opacity .5s;
13  transition: opacity .5s;
14}
15
16.overlay._open {
17  width: 100%;
18  height: 100%;
19  opacity: 1;
20}
21
22.modal {
23  display: none;
24  height: 100%;
25  position: fixed;
26  top: 0;
27  left: 0;
28  width: 100%;
29  z-index: 3;
30}
31
32.js-modal {
33  /* display: block;
34    width: calc(550 /1920*100%);
35    height: calc(600/1080*100%);
36    background-color: #fff;
37    position: absolute;
38    top: 50%;
39    left: 50%;
40    margin-right: 20px;
41    border: 1px solid #707070;
42    transform: translate(-50%,-50%);
43    z-index: 100; */
44}
45
46.js-modal .modal__bg {
47  background: rgba(0, 0, 0, 0.6);
48  height: 100%;
49  position: absolute;
50  width: 100%;
51}
52
53.js-modal .js-modal-content {
54  background: #fff;
55  padding: 40px;
56  position: absolute;
57  top: 50%;
58  left: 50%;
59  -webkit-transform: translate(-50%, -50%);
60          transform: translate(-50%, -50%);
61  width: 60%;
62  position: relative;
63}
64
65@media screen and (max-width: 599px) {
66  .js-modal .js-modal-content {
67    width: 95%;
68    padding: 20px;
69  }
70}
71
72@media screen and (min-width: 1180px) {
73  .js-modal .js-modal-content {
74    width: 28%;
75    min-width: 550px;
76    padding: 20px 60px 90px 60px;
77  }
78}
79
80.form-inner .form_img {
81  width: 18px;
82  height: 18px;
83}
84
85.form-inner h2 {
86  font-size: 2rem;
87  text-align: center;
88  padding: 10px;
89}
90
91.form {
92  margin-top: 28px;
93}
94
95.form-list .form-item input {
96  border: 1px solid #E7E7E7;
97  padding: 0 10px;
98  width: 100%;
99  line-height: 1;
100  color: #797878;
101  height: 32px;
102  margin-top: 10px;
103}
104
105.form-list .form-item select {
106  border: 1px solid #E7E7E7;
107  padding: 0 10px;
108  width: 100%;
109  line-height: 1;
110  color: #797878;
111  height: 32px;
112  margin-top: 10px;
113}
114
115.form-close {
116  text-align: center;
117}
118
119.form-close > a {
120  display: inline-block;
121  width: 198px;
122  margin-top: 64px;
123  border: 1px solid #000;
124  text-align: center;
125  padding: 13px;
126  line-height: 1;
127  -webkit-transition: .3s;
128  transition: .3s;
129}
130

JS
1/* modal  , .modal */
2$(function () {
3  $('.js-modal-open').on('click', function () {
4   //$(".js-modal").toggleClass('_modal');
5    $('.js-modal').fadeIn();
6    return false;
7  });
8  $('.js-modal-close').on('click', function () {
9    $('.js-modal').fadeOut();
10    return false;
11  });
12});

2021/12/28 12:29

https://jsfiddle.net/skys215/d61Lav93/1/ jsFiddleで試しましてけど、fadeoutはします。それとも問題は他の場所にあるのでしょうか？

2021/12/28 16:19

skys215さん、ご回答ありがとうございます。 JsやCSS設定はどのようにされていますか？聞いた背景が、こちらで確認ができなかったからです。設定条件をそろえたほうが良いと思い、お伺いいたしました

2021/12/29 01:34

いや、私は何もしてません。たどコードを貼り付けただけです。

2021/12/29 04:41

ご返信ありがとうございます。承知しました。別の箇所を確認し、再度ご連絡させていただきます。年末にご回答ありがとうございます。

2021/12/29 05:37 編集

おっしゃる通り反応あります。結論できました。ありがとうございます。

行動規範の内容に同意します

回答1件

0

自己解決

解決できました。
原因は追究できませんでしたが、できました。おそらく、キャッシュがたまっていたことが原因かもしれません

投稿2021/12/29 05:38

総合スコア103

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問

トップ CSS3に関する質問

js imgを使ったaタグクリック時にfadeOutしたい

関連した質問

同じタグがついた質問を見る

運営からのお知らせ

【サポート業務のお知らせ】ゴールデンウィーク休業につき下記の日程で、お問い合わせ等のサポート業務をお休みいたします。 2024/04/27(土)~2024/04/29(月) 2024/05/03(金)〜2024/05/06(月) なお期間中もサポートへのお問い合わせは受け付けております。

【重要なお知らせ】いつもteratailをご利用いただきありがとうございます。現在、認証システムの修正により、一部のユーザーが強制的にログアウトされる可能性がございます。お手数おかけしますが、再度ログインを行なっていただきますよう宜しくお願いいたします。ご不便をおかけし申し訳ございません。

過去のお知らせを見る