detailsタグによる簡易モーダル風パーツ

detailsタグは多少クセはあるものの使い方によってはいろいろできると思うので、一例として試作したものです。

実現したいこと

• HTMLとCSSのみで簡易モーダル風のパーツを作成
• JavaScriptは使わない

JSを使わないという趣旨上、WAI-ARIAに対応できないのでその辺りは無視しています。

動作サンプル

以下の「実際に動くサンプル」の部分をクリックすれば確認できます。
通常モーダルといえば中央に固定配置ですが、サンプルではsummaryタグの下に配置する形にしています。

サンプルコード

<style>
  .details-dialog {
    position: relative;
  }
  .details-dialog summary::after {
    margin-left: .5em;
    content: attr(data-open);
  }
  .details-dialog[open] summary::after {
    position: absolute;
    bottom: -2em;
    left: 1em;
    margin: 0;
    padding: .1em .5em;
    border-radius: 5px;
    background-color: rgb(156, 32, 32);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3);
    color: #fff;
    content: attr(data-close);
    z-index: 101;
  }
  .details-dialog[open] summary::before {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .9);
    content: '';
    z-index: 100;
  }
  .details-body__inner {
    position: absolute;
    margin: 2.5em 1em 1em;
    padding: 1em;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .3);
    z-index: 101;
  }
  .details-body__inner>*:first-child {
    margin-top: 0;
  }
  .details-body__inner>*:last-child {
    margin-bottom: 0;
  }
</style>
<details class="details-dialog">
　　　　<summary data-open="[詳細を見る]" data-close="閉じる">実際に動くサンプル</summary>
　　　　<div class="details-body">
　　　　　　　　<div class="details-body__inner">
　　　　　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
　　　　　　　　</div>
　　　　</div>
</details>

data属性で「[詳細を見る]」や「閉じる」を設定しているので、ここは簡単に変更可能です。

当ブログのCSSの影響もあるため多少余分な記述もありますが、特にz-indexは適宜調整という感じです。

閉じる動作

ちょっと工夫をして、閉じる際は「閉じる」ボタンだけではなく、表示したコンテンツ外の白半透明部分をクリックでも閉じられるようにしています。

この仕組みは確かShopifyのテーマの中を調べている時に確認した方法ですが(おそらくDawnかDebuteテーマだったかと)、応用すると一気に幅が広がる有用な仕組みだと思います。

コンテンツ表示位置

閉じるボタンの配置場所など、JSでの実装に比べていくつか問題があるので自由度は高くないのですが、position:fixed;を使用して中央固定することも可能です。

結び

ここまでで触れていませんでしたが表示時のアニメーションが使えませんし、他の点から見てもJavaScriptを使う方が自由度が高くより良い実装になることは確かです。

とはいえJavaScriptを書かずに簡易に実装したいという欲求はあるので、あまり推奨できないものの、色々切り捨てOKと判断できるのであればHTML+CSSでの実装も視野に入るかもしれません。

Twitter

Hatena

Facebook

Pocket