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

右下のボタンでフォームを表示

``` ```css /* ── モーダルフォーム｜表示ボタン ── */ #mobutton { position: fixed; right: 8px; bottom: 8px; z-index: 9999; display: block; box-sizing: border-box; width: 32px; height: 32px; border-radius: 50%; border: solid 4px #f69; outline: none; background: #fff center center / cover url( "data:image/svg+xml;charset=utf-8," ); cursor: pointer; transition: 0.2s; } #mobutton.open { transform: rotate( 180deg ) } /* ── モーダルフォーム｜非表示 ── */ [ name="moform" ] { position: fixed; left: 0px; top: 0px; z-index: 999; width: 100vw; height: 100vh; background: rgba( 0, 0, 0, 0.5 ); opacity: 0; transition: 0.2s; pointer-events: none; } [ name="moform" ] > div { position: absolute; left: 0px; top: 100%; box-sizing: border-box; width: 100%; min-height: 200px; padding: 20px; border-radius: 8px 8px 0px 0px; background: #fff; transition: 0.2s; } /* ── モーダルフォーム｜表示 ── */ [ name="moform" ].open { opacity: 1; pointer-events: auto } [ name="moform" ].open > div { transform: translateY( -100% ) } ```

質問編集履歴