More than 1 year has passed since last update.

daisyUI のモーダルが一番前に来てくれない時

Posted at 2022-06-09

解決

react のポータルを利用し、ルートDOM階層の外部にモーダルの表示を行うことで解決できる
下記サンプルは、 nextJs 利用時の方法となります。

pages/_document.tsx

class MyDocument extends Document {
  render() {
    return (
      <Html lang={AppConfig.locale}>
        <Head />
        <body>
          <Main />
          <div id="modal" />  {/* <- 追加する */} 
          <NextScript />
        </body>
      </Html>
    );
  }
}

ModalBodyに当たる部分を portal で囲えばOK

components/Modal.tsx

import { createPortal } from 'react-dom';

const ModalBody = ({ children }: any) => {
  const modalDom = document.getElementById('modal');
  return createPortal(children, modalDom!);
};

const Modal = () => {
  return (
    <>
      <label htmlFor="my-modal" className="modal-button btn">
        open modal
      </label>

      <ModalBody>
        <input type="checkbox" id="my-modal" className="modal-toggle" />
        <div className="modal">
          <div className="modal-box">
            <h3 className="text-lg font-bold">
              Congratulations random Interner user!
            </h3>
            <p className="py-4">
              You've been selected for a chance to get one year of subscription
              to use Wikipedia for free!
            </p>
            <div className="modal-action">
              <label htmlFor="my-modal" className="btn">
                Yay!
              </label>
            </div>
          </div>
        </div>
      </ModalBody>
    </>
  );
};

変更後

参考

https://ja.reactjs.org/docs/portals.html
https://github.com/saadeghi/daisyui/issues/533

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up