×ボタンでしか閉じれないモーダルはウザいなぁ～　← Alpine.jsなら10秒で解決ってマ？

# ×ボタンでしか閉じれないモーダルはウザい
<p class="codepen" data-height="400" data-default-tab="html,result" data-slug-hash="QWxRzBd" data-user="gorimatyan" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/gorimatyan/pen/QWxRzBd">
  Untitled</a> by gorimatyan (<a href="https://codepen.io/gorimatyan">@gorimatyan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
ウザすんぎ。

# ウザくないモーダルがコチラ
背景クリックで閉じることができます。
<p class="codepen" data-height="400" data-default-tab="html,result" data-slug-hash="MWXdZMQ" data-user="gorimatyan" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/gorimatyan/pen/MWXdZMQ">
  alpine.js modal-after</a> by gorimatyan (<a href="https://codepen.io/gorimatyan">@gorimatyan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
ストレスなし子。

# コードの違い
### before
```html
<!-- チワワ解説ボタン -->
<div x-data="{open: false}">
  <div>
    <button x-on:click="open = true" class="border p-3 bg-gray-200 rounded-xl border-black shadow-lg m-4">チワワの解説を読む</button>
  </div>

<!-- モーダル -->
  <div x-cloak 
       x-show="open" 
       class="fixed top-0 left-0 w-full h-full bg-black bg-opacity-40 flex justify-center items-center border"
>
    <div class="max-w-xs w-full h-auto flex flex-col bg-white rounded-xl px-4 py-2">
       <header class="flex justify-between items-end pb-2 mb-2 border-b border-black">
         <p>こんにチワワ</p>
         <div x-on:click="open = false" class="text-2xl cursor-pointer">×</div>
       </header>
      <div class="py-2 px-1">
        チワワ（スペイン語: ChihuahuaまたはChihuahueño）は、世界的に公認された犬の中でも最も小さな犬種。<br>
        メキシコのチワワ地域が原産地。チワワは、北アメリカにおいては最も古い犬種であり、
        テチチ (Techichi) として知られるアステカ文明の王族の時代から飼われ儀式の生贄とされていた。
      </div>
    </div>
  </div>
</div>
```

### after
モーダル本体にx-on:click.away="open = false"を足すだけ。
ワシら、足すだけやから。

::: note
x-on:click.away は指定した要素以外をクリックした時に発火します。

:::


```diff_html
<div x-data="{open: false}">
  <div>
    <button x-on:click="open = true" class="border p-3 bg-gray-200 rounded-xl border-black shadow-lg m-4">チワワの解説を読む</button>
  </div>

  <div x-cloak 
       x-show="open" 
       class="fixed top-0 left-0 w-full h-full bg-black bg-opacity-40 flex justify-center items-center border">
+    <div x-on:click.away="open = false"
         class="max-w-xs w-full h-auto flex flex-col bg-white rounded-xl px-4 py-2">
       <header class="flex justify-between items-end pb-2 mb-2 border-b border-black">
         <p>こんにチワワ</p>
         <div x-on:click="open = false" class="text-2xl cursor-pointer">×</div>
       </header>
      <div class="py-2 px-1">
        チワワ（スペイン語: ChihuahuaまたはChihuahueño）は、世界的に公認された犬の中でも最も小さな犬種。<br>メキシコのチワワ地域が原産地。チワワは、北アメリカにおいては最も古い犬種であり、テチチ (Techichi) として知られるアステカ文明の王族の時代から飼われ儀式の生贄とされていた。
      </div>
    </div>
  </div>
</div>
```

# まとめ
（既にモーダルを作っていれば）ガチで10秒で実装できる。