モーダルウィンドウを閉じる指示がわかりません

Question

前提・実現したいこと

画像をクリックしたときにモーダルウィンドウを開くようにしたのですが、開いたままで閉じられません。
右上に×とかを表示させてクリックしたら閉じる設定をしたいです。
J Queryはまだ初心者で調べて入れたものが下記のソースになります。

該当のソースコード

CSS

figcaption.default {
 display: none;
}

figcaption.active {
 display: block; 
}

figcaption.in_design {
 background-color: #000;
 opacity: 0.9;
}

.active.in_design {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 display: flex;
 flex-wrap: wrap;
}

.in_design img {
 width: 62%;
 height: 62%;
 margin: 19% auto;
}


J Query

$(window).on("load", function () {
 $(".js_trigger_sample").on("click", function () {
 var elm = $($(this).parent()).find(".default"), tmp = $(this).attr("src");
 elm.addClass("active");
 elm.removeClass("default");
 elm.find("img").attr("src", tmp)
 });
});

Comments

[Lhankor_Mhy]

質問タグの java は関係ないならば消した方がいいです。JavaScriptとお間違えでは？

[m.ts10806]

htmlどんな感じか知らないですがひとまずhide()するとかやってみました？

[mia330]

HTMLは下記のような感じです。

<figure class="popup">
<img class="js_trigger_sample" src="https://placehold.jp/150x150.png" alt="ポップアップ">
<figcaption class="default in_design"><img src="https://placehold.jp/1x1.png" alt="ポップアップ"></figcaption>
</figure>

hide()は試していないので、やってみます！ありがとうございます！

[m.ts10806]

質問本文に追記してください。
あとコードは可能ならファイル別にわけてください。
```html
HTMLのコード
```
```css
CSSのコード
```
```js
JavaScriptのコード
```

1ファイルにまとめて書いているわけではないですよね？
（それならそれでstyleタグなりscriptタグは必要）

[m.ts10806]

activeクラスがdisplayをblockにするなら、
activeクラスを削除すればいいのではないでしょうか。
（自身で書いたコードですよね・・・？）

Answer 1

<a href="test.jpg" data-lightbox="group"> と記述してJQueryで実装できました。

ありがとうございました。

Answer 2

jQueryでモーダル処理をしたいならjQueryUIまで読み込んでdialog()で実装してください

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function(){
  $('#modal').hide();
  $('img.modal').on('click',function(){
    $('#modal').dialog({
    modal:true,
    buttons:{
      "閉じる":function(){
        $(this).dialog("close");
      }
    },
    });
  });
});
</script>
<img src="" alt="img1" class="modal">
<img src="" alt="img2" class="modal">
<img src="" alt="img3" class="modal">
<div id="modal">test</div>