teratail
回答率
87.20%
質問するログイン新規登録

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

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

新規登録して質問してみよう
ただいま回答率
87.20%
トップCSS3に関する質問
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

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

free_teku
free_teku

総合スコア82

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0評価

0クリップ

348閲覧

投稿2021/12/28 11:37

前提・実現したいこと

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

試したこと

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

該当のソースコード

HTML
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link href="./Top/asset/css/destyle.css" rel="stylesheet">
	<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"><!--flatpicker-->
	<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/flatpickr">
	</script>
	<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js">
	</script><!-- 日本語化 -->
	<link href="./Top/asset/css/style.css" rel="stylesheet">

</head>
<body>
	<header class="header">
		<div class="header-inner">
			<div class="header-left">
				<h1 class="logo"><a href="#"><img alt="" class="header-logo" src="./asserts/img/top-header-logo.png"></a></h1>
				<nav class="nav drawer-nav">
					<ul class="header-list">
						<li class="header-item">
							<a href="./Room/room.html">お部屋</a>
						</li><!-- /.header-item -->
						<li class="header-item">
							<a href="./Menu/menu.html">お料理</a>
						</li><!-- /.header-item -->
						<li class="header-item">
							<a href="./Onsen/onsen.html">温泉</a>
						</li><!-- /.header-item -->
					</ul><!-- /.header-list -->
				</nav><!-- /.nav -->
			</div>
			<div class="header-right">
				<div class="header-link" id="js-modal">
					<a class="calender-link js-modal-open" href="#"><!-- <img src="./img/calender.png" alt="カレンダー"> -->
					 宿泊予約</a>
				</div><!-- /.header-link -->
				<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>
			</div><!-- /.header-right -->
		</div><!-- /.header-inner -->
	</header><!-- /.header -->
	<div class="overlay"></div><!-- /.overlay -->
	<!--modal  -->
	<div class="modal js-modal">
		<div class="modal__bg js-modal-close"></div><!-- /.modal__bg -->
		<div class="js-modal-content">
			<div class="form-inner">
				<figure class="form_img" id="js-close-calender">
					<a class="js-modal-close close-img" href="#"><img alt="✖ボタン" src="./asserts/img/close.png"></a>
				</figure><!-- /#js-close-calender -->
				<h2 class="form-ttl">宿泊予約</h2><!-- /.form-ttl -->
				<hr class="bar">
				<!-- modal-form -->
				<form action="x" class="form" id="js-form" name="js-form">
					<ul class="form-list">
						<!--1-->
						<li class="form-item"><label class="form-label" for="name">お名前</label> <input class="form_txt" name="name" placeholder="例:石井花壇" type="text"></li><!-- /.form-item -->
						<!--2-->
						<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-->
						<li class="form-item"><label class="form-plan form-label">ご希望プラン(空いているプランのみ表示されます)</label><!-- /.form-plan -->
						 <select class="select-plan" name="宿泊プラン">
							<optgroup>
								<option class="form_opption" value="hidden selected">
									プランを選択してください
								</option>
								<option class="form_opption" value="1">
									➀【期間限定】海辺の四季旬彩、贅沢美味懐石プラン
								</option><!-- /.form_opption -->
								<option class="form_opption" value="2">
									➁平日に優雅に楽しむ、特別宿泊プラン
								</option><!-- /.form_opption -->
								<option class="form_opption" value="3">
									➂絶景貸切露天と個室会席を楽しむファミリープラン
								</option><!-- /.form_opption -->
							</optgroup>
						</select><!-- /# --></li><!-- /.form-item -->
						<!--4-->
						<li class="form-item"><label class="form-label" for="js-flatpickr">日時選択<input class="flatpickr" placeholder="日時を選択してください" readonly="readonly" type="text"></label></li><!-- /.form-item -->
					</ul><!-- /.form-list -->
				</form><!-- /.form -->
			</div><!-- /.form-inner -->
			<div class="form-close">
				<a href="#">送信する</a>
			</div><!-- /.form-close -->
		</div><!-- /.modal-contents -->
	</div><!-- /.modal -->

　　　　　<script src="./Top/Js/jquery-3.6.0.min.js"></script> 
	<script src="./Top/Js/script.js"></script>

</body>
</html>

CSS
.overlay {
  content: "";
  display: block;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
}

.overlay._open {
  width: 100%;
  height: 100%;
  opacity: 1;
}

.modal {
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
}

.js-modal {
  /* display: block;
    width: calc(550 /1920*100%);
    height: calc(600/1080*100%);
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: 20px;
    border: 1px solid #707070;
    transform: translate(-50%,-50%);
    z-index: 100; */
}

.js-modal .modal__bg {
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  position: absolute;
  width: 100%;
}

.js-modal .js-modal-content {
  background: #fff;
  padding: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 60%;
  position: relative;
}

@media screen and (max-width: 599px) {
  .js-modal .js-modal-content {
    width: 95%;
    padding: 20px;
  }
}

@media screen and (min-width: 1180px) {
  .js-modal .js-modal-content {
    width: 28%;
    min-width: 550px;
    padding: 20px 60px 90px 60px;
  }
}

.form-inner .form_img {
  width: 18px;
  height: 18px;
}

.form-inner h2 {
  font-size: 2rem;
  text-align: center;
  padding: 10px;
}

.form {
  margin-top: 28px;
}

.form-list .form-item input {
  border: 1px solid #E7E7E7;
  padding: 0 10px;
  width: 100%;
  line-height: 1;
  color: #797878;
  height: 32px;
  margin-top: 10px;
}

.form-list .form-item select {
  border: 1px solid #E7E7E7;
  padding: 0 10px;
  width: 100%;
  line-height: 1;
  color: #797878;
  height: 32px;
  margin-top: 10px;
}

.form-close {
  text-align: center;
}

.form-close > a {
  display: inline-block;
  width: 198px;
  margin-top: 64px;
  border: 1px solid #000;
  text-align: center;
  padding: 13px;
  line-height: 1;
  -webkit-transition: .3s;
  transition: .3s;
}


JS
/* modal  , .modal */
$(function () {
  $('.js-modal-open').on('click', function () {
   //$(".js-modal").toggleClass('_modal');
    $('.js-modal').fadeIn();
    return false;
  });
  $('.js-modal-close').on('click', function () {
    $('.js-modal').fadeOut();
    return false;
  });
});

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

free_teku
free_teku

2021/12/28 16:19

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

2021/12/29 01:34

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

2021/12/29 04:41

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

2021/12/29 05:37 編集

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

トップCSS3に関する質問

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