Javascript 如何将模态添加到现有文件？

我昨天分别成功地创建了一个模式，因为我不想破坏我的其余代码。现在如何将其添加到现有的中？这是编码文件。多谢各位

我试着把模态代码放在导航之后，但它破坏了整个网站。表单出现了，只是没有CSS

这里是我想放置模态的地方，我想在单击锚定标记“Acessar”时打开它。我不知道把它放在哪里，因为要打开它的按钮在导航栏内（是的，按钮是锚定标签，仍然需要更改）

document.querySelectorAll（'a[href^=“#“]”）forEach（anchor=>{
anchor.addEventListener（'click'，函数（e）{
e、 预防默认值（）；
document.querySelector（this.getAttribute（'href'））.scrollIntoView({
行为：“平滑”
});
});
});
Bem vindoáMMT大学
知识是一种美德，是一种美德，是一种美德，是一种美德
在最小限度内，我们必须在日常工作中充分发挥自己的能力。
我们必须在工作中充分发挥自己的能力。

这就是你要找的吗

如果是这样的话，那么这应该是相对容易的。首先，您需要将模式HTML与其余代码结合起来。将其添加到主页的末尾，在

之后，可能是有意义的。您不必添加两个

标记和

标记，除非它们与主页中已有的不同

为了使模式看起来更美观，您需要将其放置在一个容器中，该容器填充整个页面，并具有一种褪色的背景，如下所示：

注意模态的背景是如何变灰的。这很好地突出了模态

为此，我们将div

myModal

包装在另一个div中，我将称之为

modalContainer

。我们将对它应用一些样式以获得所需的背景，因此我们还需要添加一个CSS类（我将给这个类一个非常聪明的名称

modal

）。所以你有这种结构：

... 主页上模态之前的所有内容。。。
... 模态的东西在这里
... 模态之后的脚本等等。。。

这方面的CSS：

.modal{
位置：固定；/*将其定位为填充屏幕，但不随页面移动（滚动时，它不移动，但页面在背景中移动）*/
顶部：0；/*将此元素放置在顶部*/
左：0；/*…页面的左角*/
宽度：100%；/*…并设置两个宽度*/
高度：100%；/*…和高度为100%，以便元素填充整个屏幕*/
z-index:99999；/*将z-index设置为足够高的数字，以便此元素位于所有其他元素的顶部*/
背景：rgb（0,0,0,0.7）；/*将背景设置为黑色，并具有一定的透明度，以便您可以透过它进行查看*/
/*以下内容只是将模态置于该容器的中心*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

因此，

modalContainer

跨越屏幕的整个高度和宽度，是模态的背景，而

myModal

包含实际模态

现在，为了正常工作，这需要对modal.js进行一些更改，即打开模态容器，而不仅仅是模态：

//获取模式
var modal=document.getElementById（“myModal”）；
var modal_container=document.getElementById（“modalContainer”）
modal_container.style.display=“无”；
window.onclick=函数（事件）{
console.log（event.target）
如果（event.target.id==“myBtn”）{//如果单击了按钮，则打开模式容器
modal_container.style.display=“flex”
}
否则，如果（modal！==event.target&&！modal.contains（event.target））{//如果单击在模态外部，则隐藏模态容器
modal_container.style.display=“无”；
}
}

现在它应该可以按预期工作了

完整HTML代码：

document.querySelectorAll（'a[href^=“#“]”）forEach（anchor=>{
anchor.addEventListener（'click'，函数（e）{
e、 预防默认值（）；
document.querySelector（this.getAttribute（'href'））.scrollIntoView({
行为：“平滑”
});
});
});
Bem vindoáMMT大学
知识是一种美德，是一种美德，是一种美德，是一种美德
在最小限度内，我们必须在日常工作中充分发挥自己的能力。
我们必须在工作中充分发挥自己的能力。
MMT大学
帕拉科马尔登记处
登记员
阿塞萨尔
阿塞斯MMT大学
阿塞萨尔
贝姆五世