Div прекрасно работает сам по себе, но не при включении в проект. - PullRequest
Новая
       118

Div прекрасно работает сам по себе, но не при включении в проект.

0 голосов
/ 07 августа 2020

Я работаю над модальным окном.

Когда я делаю отдельные файлы 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>

1 Ответ

1 голос
/ 07 августа 2020

Таблицы стилей 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>

Если это проблема, вы можете переименовать свой класс в 'модальный'

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