模态在 HTML 中可见，但在应用程序中可见

发布于 2025-01-18 18:58:03 字数 2413 浏览 2 评论 0原文

当我单击一个按钮显示时，努力获取我的模态渲染。 Here is the flow of this functionality

We start off by triggering toggle when the start coding button is clicked:

      Start Coding
      </button>
      <StartModal
        isShowing={isShowing}
        hide={toggle}
      />

toggle is passed down from useModal()

const { isShowing, toggle } = useModal();

userModal changes the state of isShowing to true/false

import { useState } from 'react';

const useModal = () => {
    const[isShowing, setIsShowing] = useState(false);

    function toggle() {
        console.log('toggle is being triggered')
        setIsShowing(!isShowing);
    }
    return {
        isShowing,
        toggle,
    };
};

export default useModal;

At this point toggle is being triggered is console logged

StartModal then should become visible:

import React from "react";
import "../../assets/scss/modal.scss"
import ReactDOM from 'react-dom';

const StartModal = ({ isShowing, hide }) => isShowing ? ReactDOM.createPortal(
    <>
        <div className="md-modal md-effect-12">
                <div className="md-content">
                    <h3>Ready to start programming?</h3>
                    <div>
                        <p>The session will be split into 5 phases:</p>
                        <ul>
                            <li>Introductions</li>
                            <li>Pseudo-Code</li>
                            <li>Time to Code</li>
                            <li>Solution</li>
                            <li>Rating</li>
                        </ul>
                        <button
                            className="md-close"
                            onClick={hide}
                        >Close</button>
                    </div>
                </div>
        </div>
        <div className="md-overlay"></div>
    </>, document.body
) : null;

export default StartModal;

When I click the start coding button, my modal appears in my HTML.当我在浏览器上检查Elements选项卡时，我会看到模态显示出来，但在屏幕上看不到它。我认为这不是CSS问题，因为我在父级div上有z index：2000属性。似乎DIV出现在我的React组件之外？

原文

Struggling to get my modal rendering when I click a button to show it. Here is the flow of this functionality

We start off by triggering toggle when the start coding button is clicked:

      Start Coding
      </button>
      <StartModal
        isShowing={isShowing}
        hide={toggle}
      />

toggle is passed down from useModal()

const { isShowing, toggle } = useModal();

userModal changes the state of isShowing to true/false

import { useState } from 'react';

const useModal = () => {
    const[isShowing, setIsShowing] = useState(false);

    function toggle() {
        console.log('toggle is being triggered')
        setIsShowing(!isShowing);
    }
    return {
        isShowing,
        toggle,
    };
};

export default useModal;

At this point toggle is being triggered is console logged

StartModal then should become visible:

import React from "react";
import "../../assets/scss/modal.scss"
import ReactDOM from 'react-dom';

const StartModal = ({ isShowing, hide }) => isShowing ? ReactDOM.createPortal(
    <>
        <div className="md-modal md-effect-12">
                <div className="md-content">
                    <h3>Ready to start programming?</h3>
                    <div>
                        <p>The session will be split into 5 phases:</p>
                        <ul>
                            <li>Introductions</li>
                            <li>Pseudo-Code</li>
                            <li>Time to Code</li>
                            <li>Solution</li>
                            <li>Rating</li>
                        </ul>
                        <button
                            className="md-close"
                            onClick={hide}
                        >Close</button>
                    </div>
                </div>
        </div>
        <div className="md-overlay"></div>
    </>, document.body
) : null;

export default StartModal;

When I click the start coding button, my modal appears in my HTML. When I check the Elements tab on my browser, I see the modal showing up but cannot see it on my screen. I don't think it is a css problem because I have a z-index: 2000 property on the parent div. It seems as though the div appears outside of my react components?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

纵性 2025-01-25 18:58:03

我认为最好的方法是将其与新的Div一起使用。

For example:

<body>
  <div id="root"></div>
  <div id="modal"></div>
</body>

so you can look it here: https://codesandbox.io/s/affectionate- banzai-xypu3i

I think the best approach is to use it with a new div.

For example:

<body>
  <div id="root"></div>
  <div id="modal"></div>
</body>

so you can look it here: https://codesandbox.io/s/affectionate-banzai-xypu3i

回复收藏 0 原文

~没有更多了~

关于作者

只等公子

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

模态在 HTML 中可见，但在应用程序中可见

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

身边

qq_oxT0yE

卷着的草席

￡冰雨忧蓝°

我还不会笑

Unbroken

友情链接

模态在 HTML 中可见，但在应用程序中可见

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

身边

qq_oxT0yE

卷着的草席

￡冰雨忧蓝°

我还不会笑

Unbroken

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。