Div 单独使用时效果很好，但合并到项目中时就不行了

Question

我正在研究模态框。

当我制作单独的 html 和 css 文件来测试它时，它运行良好。问题是当我将该代码放入我正在处理的网页的 html 和 css 时，模式框没有出现，唯一显示的是深色覆盖模态容器。

帮助将不胜感激。谢谢。

仅模式

const open = document.getElementById("open");
const modalContainer = document.getElementById("modal-container");
const close = document.getElementById("close");

open.onclick = function() {
  modalContainer.style.display = "block";
};

close.onclick = function() {
  modalContainer.style.display = "none";
};

.modal-container {
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: fantasy;
  display: none;
}

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

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

<!DOCTYPE html>

<html>

<head>
  <link rel="stylesheet" href="modal.css">
</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>

网页
注意：此处用于模态的按钮是轨道 9 的按钮

const open = document.getElementById("open")
const modalContainer = document.getElementById("modal-container")
const close = document.getElementById("close")

open.onclick = function() {
    modalContainer.style.display = "block";
}

close.onclick = function() {
    modalContainer.style.display = "none";
}

@viewport {
    width: device-width ;
    zoom: 1.0 ;
}

html, body{
    height: 100%;
    margin: 0;
    background-color: #fdfcfa;
}

.body-container {
    min-height: 100%;
}

.navbar{
    height: auto;
    width: auto;
    background-color: #1c2120;
}

.navbar a{
    color: #FBFBFB;
    text-decoration: none;
    text-transform: uppercase;
    width: auto;
    margin: auto;
    font-size: 3.5em; 
    font-family: fantasy;
    text-align: center;
}

.container {
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

.container-ish {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 40%;
    height: 40%;    
    text-align: center;
}

.note {    
    width: 70%;
    display: block;
    margin: auto;
}

.container-ish p{
    width: 100%;
    font-family: fantasy;
    font-weight: lighter;
    font-size: 0.85em;
    text-align: left;
}

.record {
    padding-top: 80px;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
}

.record img {
    width: 100%;
    height: 100%;
    border: 1px solid gray;
    box-shadow: 5px 5px 5px grey;
}

.record #under {
    float: left;
    padding-left: 90px;
}

.record .text{
    position: relative;
    font-family: fantasy;
}

.record .text h2, h3, h4 {
    color: #6b6b6b;
}

.record .text h1 {
    font-size: 2.5em;
}

.record .text h2 {
    font-size: 1.15em;
    padding-bottom: 15px;
}

.record .text h3 {
    font-size: 0.9em;
}

.record .text h4 {
    font-size: 0.8em;
}

table {
    width: 110%;
    text-align: left;
}

td {
    font-family: fantasy;
    font-size: 1.18em;
    padding-bottom: 20px;
}

#footnote {
    padding-top: 10px;
}

.no, .duration {
    font-size: 1em;
    color: #262626;
}

.links{
    display: flex;
    justify-content: flex-start;
}

.links img{
    all: unset;
    width: 20px;
    height: 20px;
    margin: 10px;
}

.modal-container {    
    display: none;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: fantasy;
}

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

.modal span {
    display: flex;
    justify-content: flex-end;
    margin-right: -15px;
    cursor: pointer;
}
.footer{
    background-color: #1c2120;
    color: #FBFBFB;    
    height: 350px;
    width: 100%;
    position: relative;
}

.footer .footer-content{
    height: 100%;
}

@media only screen and (max-width: 600px) {
    .container {
        padding: 0;
        width: auto;
        text-align: center;
    }

    .container-ish {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;    
        text-align: center;
    }

    .container-ish p{
        width: 80%;
        margin: auto;
        font-family: fantasy;
        font-size: 0.8em;
        margin-top: 20px;
    }

    .record #under {
        padding-left: 0px;
        width: auto;
    }

    .record {
        left: 0px;
        padding-top: 50px;
        padding-bottom: 40px;
        display: flex;
        flex-direction: column;
    }

    .record img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: 100%;
        border: 1px solid gray;
        box-shadow: 5px 5px 5px grey;
        margin-bottom: 15px;
    }

    .record .text h2 {
        font-size: 1em;
        padding-bottom: 15px;
    }

    table {
        width: 100%;
        text-align: left;
    }

    td {
        padding: 10px;
    }
}

@media only screen and (max-width: 768px) {
    .container {
        padding: 0;
        width: auto;
        text-align: center;
    }

    .container-ish {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;    
        text-align: center;
    }
    
    .note {    
        display: none;
    }

    .record #under {
        padding-left: 0px;
        width: auto;
    }

    .record {
        left: 0px;
        padding-top: 50px;
        padding-bottom: 40px;
        display: flex;
        flex-direction: column;
    }

    .record img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 70%;
        height: 70%;
        border: 1px solid gray;
        box-shadow: 5px 5px 5px grey;
        margin-bottom: 15px;
    }

    table {
        width: 100%;
        text-align: left;
    }

    td {
        padding: 10px;
    }
}

@media only screen and (min-width: 1440px){
    table {
        width: 160%;
    }
}

.modal-container {    
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: fantasy;
    display: none;
}

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

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

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <title>Good Kid, M.A.A.D City</title>

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="goodkid.css">
        
    </head>
    <body>
        <div class="body-container">
            <div class="navbar">
                <a href="index.html">Kendrick Lamar</a>
            </div>
            
            <div class="container">
                <div class="record">
                    <div class="container-ish">
                        <img src="images/goodkid.jpg" alt="artwork of the album Good Kid, M.A.A.D City">
                        
                        <div class="links">
                            <a href="https://music.apple.com/us/album/good-kid-m-a-a-d-city/1471263898"><img src="svg/Apple_Music_Icon_blk.svg" title="Apple Music"></a>
                            <a href="https://open.spotify.com/album/6PBZN8cbwkqm1ERj2BGXJ1"><img src="svg/spotify.svg" title="Spotify"></a>
                            <a href="https://listen.tidal.com/album/35470538"><img src="svg/tidal.svg" title="Tidal"></a>
                        </div>

                        <p class="note">West Coast hip-hop elders like Snoop and Dre have virtually anointed Kendrick Lamar to carry on the legacy of gangsta rap. 
                            His second studio album good kid, m.A.A.d city, conceptual enough to be a rock opera, certainly uplifts the genre with its near-biblical 
                            themes: religion vs. violence and monogamy vs. lust. Verbally nimble, Lamar experiments with a variety of different lyrical styles, 
                            from the Bone Thugz-type of delivery on “Swimming Pools (Drank)” to the more straightforward orthodox G-funk flow on “m.A.A.d. City 
                            feat. MC Eiht.” Like prog rock, Lamar’s tracks have songs within songs—sudden tempo changes with alter egos and embedded interludes, 
                            such as unscripted recordings of his parents asking for their car back and neighborhood homies planning their latest conquest. 
                            These snippets pepper the album providing an anthropological glimpse into his life in Compton.</p>
                    </div>
                        
                    <div id="under">
                        <div class="text">
                            <h1>good kid, m.A.A.d city</h1>
                            <h2>Hip-Hop/Rap . 2012</h2>
                        </div>
                    
                        <div class="tracklist">
                            <table>
                                <tr>
                                    <td class="no">1.</td>
                                    <td class="title" id="one">Sherane a.k.a Master Splinter's Daughter</td>
                                    <td><button class="btn"><i class="fa fa-bars"></i></button></td>
                                    <td class="duration">4:33</td>
                                </tr>
                                <tr>
                                    <td class="no">2.</td>
                                    <td class="title" id="two">Bitch, Don't Kill My Vibe</td>
                                    <td><button class="btn"><i class="fa fa-bars"></i></button></td>
                                    <td class="duration">5:10</td>
                                </tr>
                                <tr>
                                    <td class="no">3.</td>
                                    <td class="title" id="three">Backseat Freestyle</td>
                                    <td><button class="btn"><i class="fa fa-bars"></i></button></td>
                                    <td class="duration">3:32</td>
                                </tr>
                                <tr>
                                    <td class="no">4.</td>
                                    <td class="title" id="four">The Art of Peer Pressure</td>
                                    <td><button class="btn"><i class="fa fa-bars"></i></button></td>
                                    <td class="duration">5:24</td>
                                </tr>
                                <tr>
                                    <td class="no">5.</td>
                                    <td class="title" id="five">Money Trees (feat. Jay Rock)</td>
                                    <td><button class="btn"><i class="fa fa-bars"></i></button></td>
                                    <td class="duration">6:26</td>
                                </tr>
                                <tr>
                                    <td class="no">6.</td>
                                    <td class="title" id="six">Poetic Justice (feat. Drake)</td>
                                    <td><button class="btn"><i class="fa fa-bars"></i></button></td>
                                    <td class="duration">5:00</td>
                                </tr>
                                <tr>
                                    <td class="no">7.</td>
                                    <td class="title" id="seven">Good Kid</td>
                                    <td><button class="btn"><i class="fa fa-bars"></i></button></td>
                                    <td class="duration">3:34</td>
                                </tr>
                                <tr>
                                    <td class="no">8.</td>
                                    <td class="title" id="eight">M.A.A.D City (feat. MC Eiht)</td>
                                    <td><button class="btn"><i class="fa fa-bars"></i></button></td>
                                    <td class="duration">5:50</td>
                                </tr>
                                <tr>
                                    <td class="no">9.</td>
                                    <td class="title" id="nine">Swimming Pools (Drank) [Extended Version]</td>
                                    <td><button class="btn" id="open"><i class="fa fa-bars"></i></button></td>
                                    <td class="duration">5:13</td>
                                </tr>
                                <tr>
                                    <td class="no">10.</td>
                                    <td class="title" id="ten">Sing About Me, I'm Dying of Thirst</td>
                                    <td><button class="btn"><i class="fa fa-bars"></i></button></td>
                                    <td class="duration">12:03</td>
                                </tr>
                                <tr>
                                    <td class="no">11.</td>
                                    <td class="title" id="eleven">Real (feat. Anna Wise)</td>
                                    <td><button class="btn"><i class="fa fa-bars"></i></button></td>
                                    <td class="duration">7:23</td>
                                </tr>
                                <tr>
                                    <td class="no">12.</td>
                                    <td class="title" id="twelve">Compton (feat. Dr. Dre)</td>
                                    <td><button class="btn"><i class="fa fa-bars"></i></button></td>
                                <td class="duration">4:08</td>
                                </tr>
                            </table>
                        </div>
    
                        <div class="text" id="footnote">
                            <h3>12 songs, 1 hour, 8 minutes</h3>
                            <h4>October 22, 2012</h4>
                            <h4>&copy; 2012 Aftermath/Interscope Records</h4>
                        </div>
                    </div>    
                </div>
        <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>

Answer 1

Boostrap StyleSheets 可能是导致此问题的原因。 BS 有一个原生 'modal' class，它可能会与您的自定义模式发生冲突。

尝试将 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>

如果是问题所在，您可以重命名 class 'modal'

CSS:

.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;
}

Html:

<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>

Div 单独使用时效果很好，但合并到项目中时就不行了

Div works just fine on its own but doesn't when incorporated in project

html

javascript

css

modal-dialog