javascript - 演示 : how to import this micromodal library

Question

我正在尝试在我的 React Web 应用程序中实现它。但是，我不知道如何导入它。 https://micromodal.now.sh/

我试过 npm install micromodal --save 然后下载 min.js 文件的 cdn 链接并将它添加到我的项目以及演示 CSS:https://gist.github.com/ghosh/4f94cf497d7090359a5c9f81caf60699

在我想使用它的文件上，我试过:

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

然后做了:

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

有人可以创建一个小型 React 项目，展示如何通过单击链接实现该库。谢谢!!

Answer 1

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

只需创建一个 micromodal.css并将其导入到您的组件中。

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

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);

---

Here's a CodeSandbox Sample for your ref.