我在将微模态库添加到我的项目时遇到问题。
这是图书馆的链接： https://micromodal.vercel.app/#introduction
我按照文档中的所有步骤进行操作，但没有成功。
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modale</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/micromodal/0.4.10/micromodal.min.js" integrity="sha512-qcwcAul7d7yUcoz3MmQABiaGDa+gVkaDWgZX6wEd/z3I6z62nQCDW3EqioQG+O+QlGCpxmJLdH5snh4IaDPiPA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<button id="openmodal">Open</button>
<!-- [1] -->
<div id="modal-1" aria-hidden="true">
<!-- [2] -->
<div tabindex="-1" data-micromodal-close>
<!-- [3] -->
<div role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
<header>
<h2 id="modal-1-title">
Modal Title
</h2>
<!-- [4] -->
<button aria-label="Close modal" data-micromodal-close>Close</button>
</header>
<div id="modal-1-content">
Modal Content
</div>
</div>
</div>
</div>
<script>
document.getElementById('openmodal').addEventListener('click',function(){
MicroModal.show('modal-1'); // [1]
})
</script>
</body>
</html>
有人可以帮助我吗？
要将 vercel 应用程序的微模态与您的网站集成，您需要更改以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/micromodal/0.4.10/micromodal.min.js" integrity="sha512-qcwcAul7d7yUcoz3MmQABiaGDa+gVkaDWgZX6wEd/z3I6z62nQCDW3EqioQG+O+QlGCpxmJLdH5snh4IaDPiPA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<button id="openmodal">Open</button>
<div class="modal micromodal-slide" id="modal-1" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
<header class="modal__header">
<h2 id="modal-1-title">
Modal Title
</h2>
<button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
</header>
<main class="modal__content" id="modal-1-content">
Modal Content
</main>
</div>
</div>
</div>
<script>
MicroModal.init();
document.getElementById('openmodal').addEventListener('click', function() {
MicroModal.show('modal-1');
});
</script>
</body>
</html>
我们只需初始化微模式即可使其具有交互性。 我们也必须遵循所有这些事情
modal, modal__overlay, modal__container, modal__header, modal__close, and modal__content
用于单击打开
MicroModal.show('modal-1');