HackMDで画像をポップアップ表示する

HackMDで画像をクリックしたらLightboxのようにページ内でポップアップ表示できないかと思いやってみました。

DEMO

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper mi vulputate ligula finibus, sit amet sodales risus interdum. Vestibulum iaculis ex eget nisl egestas tincidunt. Morbi nec dui eu justo facilisis laoreet eu id magna. Nulla scelerisque orci quis augue commodo viverra. Proin blandit laoreet augue, gravida dictum felis imperdiet non. Vivamus luctus ornare sapien vitae malesuada. Curabitur porttitor diam eu turpis cursus tristique. Sed et pretium quam, vel consectetur quam. Pellentesque tristique, urna pulvinar mollis hendrerit, lectus diam maximus enim, condimentum viverra lectus nisi eget eros.

Fusce vulputate libero a mi semper, ac dapibus dolor egestas. Vivamus augue sapien, vulputate non quam vel, lacinia facilisis nisi. Phasellus risus sapien, ultricies at fringilla sit amet, dictum quis diam. Vestibulum vehicula odio tellus, blandit commodo quam porttitor et. Nam fringilla turpis in nisl fringilla posuere. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum tellus lacus, id accumsan ligula fermentum eget. Curabitur ut imperdiet nisl. Integer lacinia neque at ultrices facilisis. Donec commodo hendrerit nulla, in placerat magna convallis nec. Pellentesque facilisis felis at nisl consectetur consequat.

 

Suspendisse quis mi interdum, lacinia tortor eget, auctor mi. Pellentesque efficitur lacus vitae lacus commodo interdum. Donec at lorem gravida, mollis odio nec, sodales nisl. Vestibulum bibendum nibh sit amet urna convallis, nec imperdiet felis consectetur. Nulla ultricies aliquam enim. Nullam luctus sodales nisl placerat vehicula. Quisque tempor, diam at suscipit sagittis, purus orci interdum nunc, quis vehicula neque urna non dui. Nam iaculis sapien sit amet porttitor blandit. Aenean feugiat id ex posuere ullamcorper. Proin non purus non ligula iaculis vulputate id sit amet urna. Ut dignissim sed erat sit amet pulvinar.

ソースと動作説明

ソース https://hackmd.io/wgz61ewASGG3GuKgmJ6ksQ?both

CSSの:focusで画像のクリックを検出し、ポップアップ表示をしています。HTMLではtabindex属性を利用するとどんな要素もフォーカス可能になります。しかしHackMDにHTMLでそれを記述してもサニタイザーが除去してしまうため、リンクで画像をラップすることでフォーカスをあてられるようにしています。リンク先を文書内の存在しないアンカー（#_image-focus）とすることでリンククリック時の移動を無効にしています。

ソースで同じ画像を2つ記述しているのは本文埋め込み用とポップアップ用を分けるためです。埋め込み用をそのままポップアップすると、本文のレイアウトが上にシフトしてしまい美しくありません。

リンクの後に をつけているのはポップアップ表示時の背景のためです。背景をクリックしてポップアップを解除するためには背景がリンクの外側の要素である必要があり、CSSの兄弟要素セレクタ（a + b）を利用してスタイルを適用しています。