我在react中使用可重用的模式，我尝试在里面渲染一个页面，但似乎有一个重叠
问题描述 投票：0回答：1
我在react中创建了一个可重用的模式：
interface ModalProps {
isVisible: boolean;
onClose: () => void;
children: any;
}
const ViewModal = ({ isVisible, onClose, children }: ModalProps) => {
if (!isVisible) return null;
const handleClose = (e: any) => {
if (e.target.id === "wrapper") onClose();
};
return (
<div
className="fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm flex justify-center items-center"
id="wrapper"
onClick={handleClose}
>
<div className="w-[600px] flex flex-col">
<button
className="text-white text-xl place-self-end"
onClick={() => onClose()}
>
X
</button>
<div className="bg-white p-2 rounded">{children}</div>
</div>
</div>
);
};
export default ViewModal;
我使用了这个模式，这样就可以显示一个弹出页面，但请参阅... 我用它来渲染这个：
import React from "react";
import ViewModal from "../../components/modal/ViewMonal";
interface CourseInfo {
title: string;
description: string;
no_of_enrolled: number;
}
function CoursesInfo() {
return (
<ViewModal
isVisible={true}
onClose={() => {}}
>
<div className="w-screen h-screen overflow-hidden">
<div className="mx-auto max-w-screen-lg px-3 py-10">
<div className="space-y-3">
<h1 className="text-3xl font-semibold">
here is where the title is rendered
</h1>
<p className="">here is where the description is rendered</p>
<ul className="flex gap-4">
<li className="flex">
<svg
xmlns="http://www.w3.org/2000/svg"
className="mr-2 w-4 text-gray-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
/>
</svg>
</li>
</ul>
</div>
<div className="mt-10 bg-white py-2">
<nav className="flex flex-wrap gap-4">
<a
href="#"
className="inline-flex whitespace-nowrap border-b-2 border-transparent py-2 px-3 text-sm font-medium text-gray-600 transition-all duration-200 ease-in-out hover:border-b-purple-600 hover:text-purple-600"
>
{" "}
Announcements{" "}
</a>
<a
href="#"
className="inline-flex whitespace-nowrap border-b-2 border-transparent border-b-purple-600 py-2 px-3 text-sm font-semibold text-purple-600 transition-all duration-200 ease-in-out"
>
{" "}
Curriculum{" "}
</a>
<a
href="#"
className="inline-flex whitespace-nowrap border-b-2 border-transparent py-2 px-3 text-sm font-medium text-gray-600 transition-all duration-200 ease-in-out hover:border-b-purple-600 hover:text-purple-600"
>
{" "}
Roster{" "}
</a>
</nav>
</div>
<ul className="mt-2 space-y-4">
<li className="text-left">
<label
htmlFor="accordion-1"
className="relative flex flex-col rounded-md border border-gray-100 shadow-md"
>
<input
className="peer hidden"
type="checkbox"
id="accordion-1"
checked
/>
<svg
xmlns="http://www.w3.org/2000/svg"
className="absolute right-0 top-4 ml-auto mr-5 h-4 text-gray-500 transition peer-checked:rotate-180"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
<div className="relative ml-4 cursor-pointer select-none items-center py-4 pr-2">
<h3 className="text-base font-bold text-gray-600 lg:text-base">
What are material
</h3>
</div>
<div className="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-96">
<ul className="space-y-1 font-semibold text-gray-600 mb-6">
<li className="flex px-2 sm:px-6 py-2.5 hover:bg-gray-100">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="mr-2 w-6"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
clip-rule="evenodd"
></path>
</svg>
Something to Ponder{" "}
<span className="ml-auto text-sm"> 23 min </span>
</li>
<li className="flex px-2 sm:px-6 py-2.5 hover:bg-gray-100">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="mr-2 w-6"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
clip-rule="evenodd"
></path>
</svg>
Tables <span className="ml-auto text-sm"> 23 min </span>
</li>
<li className="flex px-2 sm:px-6 py-2.5 hover:bg-gray-100">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="mr-2 w-6"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
clip-rule="evenodd"
></path>
</svg>
HTML Entities{" "}
<span className="ml-auto text-sm"> 23 min </span>
</li>
<li className="flex px-2 sm:px-6 py-2.5 hover:bg-gray-100">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="mr-2 w-6"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
clip-rule="evenodd"
></path>
</svg>
HTML Iframes{" "}
<a
href="#trailer-modal"
className="ml-2 rounded-full border bg-purple-100 px-2 py-1 text-xs font-semibold text-purple-500"
uk-toggle=""
>
{" "}
Preview{" "}
</a>
<span className="ml-auto text-sm"> 23 min </span>
</li>
<li className="flex px-2 sm:px-6 py-2.5 hover:bg-gray-100">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="mr-2 w-6"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
clip-rule="evenodd"
></path>
</svg>
Some important things
<span className="ml-auto text-sm"> 23 min </span>
</li>
</ul>
</div>
</label>
</li>
<li className="text-left">
<label
htmlFor="accordion-2"
className="relative flex flex-col rounded-md border border-gray-100 shadow-md"
>
<input
className="peer hidden"
type="checkbox"
id="accordion-2"
/>
<svg
xmlns="http://www.w3.org/2000/svg"
className="absolute right-0 top-4 ml-auto mr-5 h-4 text-gray-500 transition peer-checked:rotate-180"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
<div className="relative ml-4 cursor-pointer select-none items-center py-4 pr-2">
<h3 className="text-base font-bold text-gray-600 lg:text-base">
Outcomes
</h3>
</div>
<div className="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-96">
<ul className="space-y-1 font-semibold text-gray-600 mb-6"></ul>
</div>
</label>
</li>
<li className="text-left">
<label
htmlFor="accordion-3"
className="relative flex flex-col rounded-md border border-gray-100 shadow-md"
>
<input
className="peer hidden"
type="checkbox"
id="accordion-3"
/>
<svg
xmlns="http://www.w3.org/2000/svg"
className="absolute right-0 top-4 ml-auto mr-5 h-4 text-gray-500 transition peer-checked:rotate-180"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
<div className="relative ml-4 cursor-pointer select-none items-center py-4 pr-2">
<h3 className="text-base font-bold text-gray-600 lg:text-base">
Resources
</h3>
</div>
<div className="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-96">
<ul className="space-y-1 font-semibold text-gray-600 mb-6"></ul>
</div>
</label>
</li>
<li className="text-left">
<label
htmlFor="accordion-4"
className="relative flex flex-col rounded-md border border-gray-100 shadow-md"
>
<input
className="peer hidden"
type="checkbox"
id="accordion-4"
/>
<svg
xmlns="http://www.w3.org/2000/svg"
className="absolute right-0 top-4 ml-auto mr-5 h-4 text-gray-500 transition peer-checked:rotate-180"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
</label>
</li>
</ul>
</div>
</div>
</ViewModal>
);
}
export default CoursesInfo;
但这里似乎有重叠：
它应该以某种方式显示如下：
但不同的是我试图让它成为一个弹出窗口
我尝试了很多方法，但无法解决问题。我希望有人帮助我。
1个回答
0
投票
投票
该问题与
divw-screenwidth: 100vw;您可以将其替换为
w-fullw-screenpropw-[600px]propmodalWidthinterface ModalProps {
isVisible: boolean;
onClose: () => void;
children: any;
modalWidth: string
}
const ViewModal = ({ isVisible, onClose, children, modalWidth }: ModalProps) => {
if (!isVisible) return null;
const handleClose = (e) => {
if (e.target.id === "wrapper") onClose();
};
return (
<div
className="fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm flex justify-center items-center"
id="wrapper"
onClick={handleClose}
>
<div className={`${modalWidth || "w-[600px]"} flex flex-col`}>
<button
className="text-white text-xl place-self-end"
onClick={() => onClose()}
>
X
</button>
<div className="bg-white p-2 rounded">{children}</div>
</div>
</div>
);
};
export function CoursesInfo() {
return (
<ViewModal isVisible={true} modalWidth="w-screen" onClose={() => {}}>
<div className="h-screen overflow-hidden">
<div className="mx-auto max-w-screen-lg px-3 py-10">
<div className="space-y-3">
<h1 className="text-3xl font-semibold">
here is where the title is rendered
</h1>
<p className="">here is where the description is rendered</p>
<ul className="flex gap-4">
<li className="flex">
<svg
xmlns="http://www.w3.org/2000/svg"
className="mr-2 w-4 text-gray-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
/>
</svg>
</li>
</ul>
</div>
<div className="mt-10 bg-white py-2">
<nav className="flex flex-wrap gap-4">
<a
href="#"
className="inline-flex whitespace-nowrap border-b-2 border-transparent py-2 px-3 text-sm font-medium text-gray-600 transition-all duration-200 ease-in-out hover:border-b-purple-600 hover:text-purple-600"
>
{" "}
Announcements{" "}
</a>
<a
href="#"
className="inline-flex whitespace-nowrap border-b-2 border-transparent border-b-purple-600 py-2 px-3 text-sm font-semibold text-purple-600 transition-all duration-200 ease-in-out"
>
{" "}
Curriculum{" "}
</a>
<a
href="#"
className="inline-flex whitespace-nowrap border-b-2 border-transparent py-2 px-3 text-sm font-medium text-gray-600 transition-all duration-200 ease-in-out hover:border-b-purple-600 hover:text-purple-600"
>
{" "}
Roster{" "}
</a>
</nav>
</div>
<ul className="mt-2 space-y-4">
<li className="text-left">
<label
htmlFor="accordion-1"
className="relative flex flex-col rounded-md border border-gray-100 shadow-md"
>
<input
className="peer hidden"
type="checkbox"
id="accordion-1"
checked
/>
<svg
xmlns="http://www.w3.org/2000/svg"
className="absolute right-0 top-4 ml-auto mr-5 h-4 text-gray-500 transition peer-checked:rotate-180"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
<div className="relative ml-4 cursor-pointer select-none items-center py-4 pr-2">
<h3 className="text-base font-bold text-gray-600 lg:text-base">
What are material
</h3>
</div>
<div className="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-96">
<ul className="space-y-1 font-semibold text-gray-600 mb-6">
<li className="flex px-2 sm:px-6 py-2.5 hover:bg-gray-100">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="mr-2 w-6"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
clip-rule="evenodd"
></path>
</svg>
Something to Ponder{" "}
<span className="ml-auto text-sm"> 23 min </span>
</li>
<li className="flex px-2 sm:px-6 py-2.5 hover:bg-gray-100">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="mr-2 w-6"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
clip-rule="evenodd"
></path>
</svg>
Tables <span className="ml-auto text-sm"> 23 min </span>
</li>
<li className="flex px-2 sm:px-6 py-2.5 hover:bg-gray-100">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="mr-2 w-6"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
clip-rule="evenodd"
></path>
</svg>
HTML Entities{" "}
<span className="ml-auto text-sm"> 23 min </span>
</li>
<li className="flex px-2 sm:px-6 py-2.5 hover:bg-gray-100">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="mr-2 w-6"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
clip-rule="evenodd"
></path>
</svg>
HTML Iframes{" "}
<a
href="#trailer-modal"
className="ml-2 rounded-full border bg-purple-100 px-2 py-1 text-xs font-semibold text-purple-500"
uk-toggle=""
>
{" "}
Preview{" "}
</a>
<span className="ml-auto text-sm"> 23 min </span>
</li>
<li className="flex px-2 sm:px-6 py-2.5 hover:bg-gray-100">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
className="mr-2 w-6"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
clip-rule="evenodd"
></path>
</svg>
Some important things
<span className="ml-auto text-sm"> 23 min </span>
</li>
</ul>
</div>
</label>
</li>
<li className="text-left">
<label
htmlFor="accordion-2"
className="relative flex flex-col rounded-md border border-gray-100 shadow-md"
>
<input
className="peer hidden"
type="checkbox"
id="accordion-2"
/>
<svg
xmlns="http://www.w3.org/2000/svg"
className="absolute right-0 top-4 ml-auto mr-5 h-4 text-gray-500 transition peer-checked:rotate-180"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
<div className="relative ml-4 cursor-pointer select-none items-center py-4 pr-2">
<h3 className="text-base font-bold text-gray-600 lg:text-base">
Outcomes
</h3>
</div>
<div className="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-96">
<ul className="space-y-1 font-semibold text-gray-600 mb-6"></ul>
</div>
</label>
</li>
<li className="text-left">
<label
htmlFor="accordion-3"
className="relative flex flex-col rounded-md border border-gray-100 shadow-md"
>
<input
className="peer hidden"
type="checkbox"
id="accordion-3"
/>
<svg
xmlns="http://www.w3.org/2000/svg"
className="absolute right-0 top-4 ml-auto mr-5 h-4 text-gray-500 transition peer-checked:rotate-180"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
<div className="relative ml-4 cursor-pointer select-none items-center py-4 pr-2">
<h3 className="text-base font-bold text-gray-600 lg:text-base">
Resources
</h3>
</div>
<div className="max-h-0 overflow-hidden transition-all duration-500 peer-checked:max-h-96">
<ul className="space-y-1 font-semibold text-gray-600 mb-6"></ul>
</div>
</label>
</li>
<li className="text-left">
<label
htmlFor="accordion-4"
className="relative flex flex-col rounded-md border border-gray-100 shadow-md"
>
<input
className="peer hidden"
type="checkbox"
id="accordion-4"
/>
<svg
xmlns="http://www.w3.org/2000/svg"
className="absolute right-0 top-4 ml-auto mr-5 h-4 text-gray-500 transition peer-checked:rotate-180"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
</label>
</li>
</ul>
</div>
</div>
</ViewModal>
);
}
最新问题
- JavaScript 页面重访
- 决策树分类器的底层 sklearn“熵”和“log_loss”标准有区别吗？
- Boost.Asio默认令牌支持导致自由函数调用不明确错误
- 在每个元素的基础上增加迭代器的大小/扩展和映射迭代器
- 通过匹配Twig中的键值获取特定数组元素
- 依次显示各种/随机加载消息
- 这两种类型的向量有什么区别（Julia）
- 获取意外参数：参数中发现意外的密钥“UploadId”，多部分 S3 预签名中出现错误
- 用ggplot2和grid画出最适合的线结束的箭头
- Angular 2+ 中悬停时列表的样式元素
- 通过“import”导入的所有内容都会获得类型，但 require() 不会
- **python3 osmWebWizard.py** 在 Ubuntu 22.04 中无法工作
- 如何使用mysql在codeigniter中计算总计
- MSD 算法输出产生“镜像”输出
- 在 Nuxt 3 中使用可组合项对组件进行 Vitest 单元测试
- Redshift：stv_inflight 和 stv_recents 显示相互矛盾的结果
- 在qmake项目中链接SRT库
- 如何统计嵌套列表中子列表的数量？
- vscode 可以使用 Properties/launchSettings.json 中的配置文件吗？
- 条件格式不起作用，而是格式化所有单元格
© www.soinside.com 2019 - 2024. All rights reserved.