「Colorbox」でモーダルウィンドウ

「Colorbox」でモーダルウィンドウを出すために
以下の記事を参考にしました。

この記事を元に作成したのがこちらです。
https://yasaidemo.com/kokutai_hearing/1.html

クリックしてもなにも反応しません。
原因が分からなくて困っています。
ご教示頂ければ幸いです。


<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="colorbox.css">
<script src="jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>

<script>
   $('.trig-colorbox_inline').colorbox({
    inline: true,
    opacity: 0.6,
});
</script>

</head>
<body>
<a class="trig-colorbox_inline" href="#colorbox_inline">ここをクリックするとモーダルを開きます</a>
<div style="display: none;">
    <div id="colorbox_inline">
        <p>この文章をモーダルで表示します。</p>
    </div>
</div>
</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

おそらくエラー出てます。
ブラウザの開発ツールのコンソール確認を。

プログラムは基本上から読み込まれて実行されるため、
現在の
$('.trig-colorbox_inline').colorbox({
の位置では.trig-colorbox_inlineが付与された要素は読み込まれていません。
読み込まれていない要素に対しては操作できません。
読み込みを待つか、</body>の前に移動してください。
※どちらかだけでOK