Javascript 演示：如何导入此micromodal库

我正在尝试在我的React Web应用程序中实现这一点。但是，我不知道如何导入它

我尝试过npm install micromodal--save，然后将cdn链接下载到min.js文件，并将其添加到我的项目以及演示CSS中：

在我想要使用它的文件上，我尝试了：

<a data-micromodal-trigger="modal-1">
//some image
</a>

//一些图像

然后做了：

    <div id="modal-1">
//contents of example modal
    </div>

//范例的内容

---

是否有人可以创建一个mini-react项目，显示如何在单击链接时实现此库。谢谢

您将需要模态标记和样式。你可以得到它们

只需创建一个组件并将其导入到组件中

然后，您可以通过调用以下命令触发模式打开：

MicroModal.show('modal-id');

尝试一下：

import React from "react";
import ReactDOM from "react-dom";
import MicroModal from "micromodal"; // es6 module
import "./styles.css";
import "./micromodal.css";

function App() {
  MicroModal.init();

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <button onClick={() => MicroModal.show("modal-1")}>Open Modal</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 class="modal__title" id="modal-1-title">
                Micromodal
              </h2>
              <button
                class="modal__close"
                aria-label="Close modal"
                data-micromodal-close
              />
            </header>
            <main class="modal__content" id="modal-1-content">
              <p>
                Try hitting the <code>tab</code> key and notice how the focus
                stays within the modal itself. Also, <code>esc</code> to close
                modal.
              </p>
            </main>
            <footer class="modal__footer">
              <button class="modal__btn modal__btn-primary">Continue</button>
              <button
                class="modal__btn"
                data-micromodal-close
                aria-label="Close this dialog window"
              >
                Close
              </button>
            </footer>
          </div>
        </div>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

---

这是给你的裁判的一封信

---

好的，那么我需要.js文件吗？另外，如何从（锚定）创建方法

constopenmodal=（）=>MicroModal.show（“modal-1”）触发模态

然后单击链接的

将其命名为

：
我已经更新了代码并进行了相同的修改。不知道你的意思是我需要一个.js文件。谢谢！！我需要对这个文件做些什么吗？由于您正在使用React，您可以通过
npm
安装它，然后我已经在
App.js
中引用了它：
从“MicroModal”导入MicroModal。所以你不需要
unpkg.com/micromodal/dist/micromodal.min.js
好的，非常感谢你的帮助！！现在可以用了