如何使JQuery colorbox正确响应

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="path/to/colorbox.css">
<script src="path/to/jquery.colorbox-min.js"></script>

<button id="openColorbox">打开Colorbox</button>

$(document).ready(function() {
  $('#openColorbox').click(function() {
    $.colorbox({
      href: 'path/to/content.html', // 弹出窗口中显示的内容，可以是HTML文件、图像、视频等
      width: '500px', // 弹出窗口的宽度
      height: '300px', // 弹出窗口的高度
      maxWidth: '90%', // 弹出窗口的最大宽度
      maxHeight: '90%', // 弹出窗口的最大高度
      opacity: 0.8, // 弹出窗口的透明度
      transition: 'fade', // 弹出窗口的过渡效果
      closeButton: true, // 是否显示关闭按钮
      overlayClose: true // 点击遮罩层是否关闭弹出窗口
    });
  });
});