我想创建一个模态框，该模态框的导航栏顶部有两个或多个导航项。
原因是我希望网站感觉像是在使用应用程序，因此与主页上的元素进行交互不需要每次都加载新页面，而只需为每个项目加载一个模式框。
主页是一个包含100多个项目的列表，每个项目都会触发其自己的带有导航栏的模式框。
关于如何做到这一点的任何想法？
[尝试将其显示为div，仅在单击按钮时显示。示例显示个人资料，而不是打开发送到个人资料页面的新HTML页面，请执行
<div id="profile"> </div>
现在在CSS上添加样式
#profile{
Display:none; /*hides the modal on start */
Height: 80%; /*will take 80% of the page height. you choose the height you want*/
Width:80%; /* you can also change this to whatever you want*/
Background-color: white; /* choose the color you want*/
You can also change its position if you want with position:absolute; and change the top and left settings
现在使它出现在单击上，只需将onclick事件添加到您的按钮或您将触发它的任何东西上>]
<button class:"button" onclick("document.getElementById("Profile").style.display = 'block'"> show profile </button>这将显示轮廓模式，如果要关闭它，只需创建一个按钮即可将轮廓隐藏在轮廓div中
<div id="Profile"> <button class="close" onclick("document.getElementById("Profile").style.display = 'none'"> close profile </button> <!---- You add the onclick event here to close it---> </div>希望这对模态有帮助。这是我在创建标签时使用的方法，而不是在其他html文件中打开页面。