Javascript Div本身工作正常，但不'；t当纳入项目时_Javascript_Html_Css_Modal Dialog

Javascript Div本身工作正常，但不'；t当纳入项目时

javascript html css

Javascript Div本身工作正常，但不'；t当纳入项目时,javascript,html,css,modal-dialog,Javascript,Html,Css,Modal Dialog,我正在制作一个模态盒当我制作单独的html和css文件来测试它时，它工作得非常好。问题是，当我将代码放入我正在处理的网页的html和css中时，模式框不会出现，唯一显示的是模式容器的黑色覆盖层非常感谢您的帮助。谢谢仅限模态 const open=document.getElementById（“open”）； const modalContainer=document.getElementById（“模态容器”）； const close=document.getElementById（

我正在制作一个模态盒

当我制作单独的html和css文件来测试它时，它工作得非常好。问题是，当我将代码放入我正在处理的网页的html和css中时，模式框不会出现，唯一显示的是模式容器的黑色覆盖层

非常感谢您的帮助。谢谢

仅限模态

const open=document.getElementById（“open”）；
const modalContainer=document.getElementById（“模态容器”）；
const close=document.getElementById（“close”）；
open.onclick=函数（）{
modalContainer.style.display=“块”；
};
close.onclick=函数（）{
modalContainer.style.display=“无”；
};
.modal容器{
背景色：rgba（0,0,0,0.4）；
位置：固定；
排名：0；
左：0；
z指数：1；
宽度：100%；
身高：100%；
溢出：自动；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体家族：幻想；
显示：无；
}
.莫代尔{
背景色：白烟；
宽度：35%；
身高：90%；
利润率：5%自动；
填充：20px 40px；
长方体阴影：5px 5px 5px灰色；
边界半径：10px；
}
.模态跨度{
显示器：flex；
证明内容：柔性端；
右边距：-15px；
光标：指针；
}

开放模态
&时代；
游泳池（已饮用）

倒出，喝了，头球，喝了坐下，喝了，站起来，喝了，昏倒，喝了，醒了，喝了，喝了，喝了，喝了，喝了，喝了，喝了
Boostrap样式表可能导致这种情况。BS有一个本机“模态”类，它可能会与您的自定义模态产生冲突
尝试将BS cdn添加到清晰的示例中，这样您就会知道这是否是问题所在：
<!DOCTYPE html>

<html>

<head>
  <link rel="stylesheet" href="modal.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>

<body>
  <button id="open" onclick="openModal()">open modal</button>

  <div class="modal-container" id="modal-container">
    <div class="modal">
      <span id="close">&times;</span>

      <h1>Swimming Pools (Drank)</h1>
      <hr>
      <p>Pour up, drank, head shot, drank <br> Sit down, drank, stand up, drank <br> Pass out, drank, wake up, drank <br> Faded, drank, faded, drank</p>
    </div>
  </div>
</body>

</html>

Html:

&时代；
游泳池（已饮用）

倒出，喝下

.custom-modal {
    background-color: whitesmoke;
    width: 35%;
    height: 90%;
    margin: 5% auto;
    padding: 20px 40px;
    box-shadow: 5px 5px 5px gray;
    border-radius: 10px;
}

.custom-modal span {
    display: flex;
    justify-content: flex-end;
    margin-right: -15px;
    cursor: pointer;
}

<div class="modal-container" id="modal-container">
     <div class="custom-modal">
     <span id="close">&times;</span>                
     <h1>Swimming Pools (Drank)</h1>
     <hr>
     <p>Pour up, drank, ...</p>
</div>