モーダル以外の場所をクリックした時にフォーム画面を閉じたい

現在右下のボタンがクリックされた時にモーダル画面が表示されるようにしているのですが、モーダル以外の場所をクリックした場合にモーダル画面を閉じたいのですが、jqueryを使用せずにやる事は可能でしょうか？

html
1<div>右下のボタンでフォームを表示</div>
2
3<!-- ── モーダルフォーム｜表示ボタン ── -->
4<button id="mobutton" onclick="
5document.moform.classList.toggle( 'open' );
6document.getElementById( 'mobutton' ).classList.toggle( 'open' );
7"></button>
8
9<!-- ── モーダルフォーム｜フォーム ── -->
10<form name="moform">
11<div>モーダルフォーム: <input></div>
12</form>

css
1/* ── モーダルフォーム｜表示ボタン ── */
2#mobutton {
3position: fixed; right: 8px; bottom: 8px; z-index: 9999;
4display: block;
5box-sizing: border-box;
6width: 32px; height: 32px;
7border-radius: 50%;
8border: solid 4px #f69;
9outline: none;
10background: #fff center center / cover
11url( "data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'><polyline stroke-width='4' stroke-linecap='round' stroke='%23f69' fill='none' points='8,14 16,6 24,14' /><line stroke-width='4' stroke-linecap='round' stroke='%23f69' fill='none' x1='16' y1='6' x2='16' y2='24' /></svg>" );
12cursor: pointer;
13transition: 0.2s;
14}
15#mobutton.open { transform: rotate( 180deg ) }
16
17/* ── モーダルフォーム｜非表示 ── */
18[ name="moform" ] {
19position: fixed; left: 0px; top: 0px; z-index: 999;
20width: 100vw; height: 100vh;
21background: rgba( 0, 0, 0, 0.5 );
22opacity: 0;
23transition: 0.2s;
24pointer-events: none;
25}
26[ name="moform" ] > div {
27position: absolute; left: 0px; top: 100%;
28box-sizing: border-box;
29width: 100%;
30min-height: 200px;
31padding: 20px;
32border-radius: 8px 8px 0px 0px;
33background: #fff;
34transition: 0.2s;
35}
36
37/* ── モーダルフォーム｜表示 ── */
38[ name="moform" ].open { opacity: 1; pointer-events: auto }
39[ name="moform" ].open > div { transform: translateY( -100% ) }

m.ts10806

2020/07/21 08:56

「可能です」だけで良いですかね。

m.ts10806

2020/07/21 09:56

なぜならJQueryは結局JavaScriptで書かれているので、「可能です」以外に答えがないのです。

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

回答2件

モーダルの実装をどうしたいかによりますがdialogをつかって手を抜くとこんな感じ

codepen dialog open/close

投稿2020/07/21 10:16

yambejp

総合スコア114769

ベストアンサー

やってみました。出来ました。

下記のコードをペーストしたら動きますが、
onclickはやらないほうが良いそうです。

https://iwb.jp/javascript-html-onclick-attribute-dont-use/

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8" />
6    <title>modal</title>
7    <style>
8        .bg {
9            position: absolute;
10            top: 0;
11            left: 0;
12            z-index: 2;
13            background-color: transparent;
14            border: none;
15            outline: none;
16            padding: 0;
17            appearance: none;
18            width: 100%;
19            height: 100%;
20        }
21
22        .bgClose {
23            cursor: pointer;
24            background-color: rgba(0, 0, 0, 0.5);
25        }
26
27        /* ── モーダルフォーム｜表示ボタン ── */
28
29
30        #mobutton {
31            position: fixed;
32            right: 8px;
33            bottom: 8px;
34            z-index: 3;
35            display: block;
36            box-sizing: border-box;
37            width: 32px;
38            height: 32px;
39            border-radius: 50%;
40            border: solid 4px #f69;
41            outline: none;
42            background: #fff center center / cover url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'><polyline stroke-width='4' stroke-linecap='round' stroke='%23f69' fill='none' points='8,14 16,6 24,14' /><line stroke-width='4' stroke-linecap='round' stroke='%23f69' fill='none' x1='16' y1='6' x2='16' y2='24' /></svg>");
43            cursor: pointer;
44            transition: 0.2s;
45        }
46
47        #mobutton.open {
48            transform: rotate(180deg)
49        }
50
51        /* ── モーダルフォーム｜非表示 ── */
52        [ name="moform"] {
53            position: fixed;
54            left: 0px;
55            top: 0px;
56            width: 100vw;
57            height: 100vh;
58
59            opacity: 0;
60            transition: 0.2s;
61            pointer-events: none;
62        }
63
64        [ name="moform"]>div {
65            position: absolute;
66            left: 0px;
67            top: 100%;
68            box-sizing: border-box;
69            width: 100%;
70            min-height: 200px;
71            padding: 20px;
72            border-radius: 8px 8px 0px 0px;
73            background: #fff;
74            transition: 0.2s;
75            z-index: 3;
76        }
77
78        /* ── モーダルフォーム｜表示 ── */
79        [ name="moform"].open {
80            opacity: 1;
81            pointer-events: auto
82        }
83
84        [ name="moform"].open>div {
85            transform: translateY(-100%)
86        }
87    </style>
88</head>
89
90<body>
91    <div>右下のボタンでフォームを表示</div>
92    <!-- ── モーダルフォーム｜表示ボタン ── -->
93    <button id="mobutton" onclick="
94    document.moform.classList.toggle( 'open' );
95    document.getElementById( 'mobutton' ).classList.toggle( 'open' );
96    document.getElementById('hideBtn').classList.toggle('bgClose')
97    "></button>
98
99    <!-- ── モーダルフォーム｜フォーム ── -->
100    <form name="moform">
101        <div>モーダルフォーム: <input></div>
102        <button id="hideBtn" class="bg"></button>
103    </form>
104
105    <script>
106        const form = document.getElementsByTagName("form")[0];
107        const btn = document.getElementById('mobutton');
108
109        hideBtn.addEventListener("click", () => {
110            if (form.classList.contains("open")) {
111                mobutton.click();
112            }
113        });
114    </script>
115</body>
116
117</html>