マークダウンでモーダル表示

投稿者: | 2017年4月15日

マークダウン記法で画像のモーダル表示を試したら出来たので、公開します。

モーダル用jQuery+Colorbox(クラス例:modalWindowを指定)
<link rel="stylesheet" href="./css/colorbox.css" type="text/css">
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/jquery.colorbox-min.js"></script>
<script language="JavaScript">
$(function() {
    $(".modalWindow").colorbox({
    maxWidth:"90%",
    maxHeight:"90%",
    opacity: 0.7
  });
});
</script>
画像に対してモーダル用リンクを指定(中括弧内はクラスとして展開される)
[![alt](../picture/test.png)](../picture/test.png "title") {.modalWindow}
result.html
<p>
  <a href="../picture/test.png" title="title" class="modalWindow">
    <img src="../picture/test.png" alt="alt" />
  </a>
</p>