javascript - 演示:如何导入此微模式库

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

我试过npm install micromodal --save，然后将cdn链接下载到min.js文件，并将其添加到我的项目以及演示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项目，该项目显示如何通过单击链接来实现该库。谢谢!!

最佳答案

您将需要模式标记和样式。您可以获取它们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);