Модальное Всплывающее окно не загружается на странице

Question

Я использовал модал для создания всплывающего окна при загрузке моей страницы.

Мой код отлично работает на моем тестовом коде: https://codepen.io/nico3d911/pen/yjBRrK?editors=1010

Но когда я хочу поместить его в свой реальный проект, в основном копировать, я не получаю никакого результата: (

https://codepen.io/nico3d911/pen/odvmPR?editors=1011

HTML:

<div class="modal">
  <div class="modal-content">

    <h1>Choose your team!</h1>
    <span class="close-button" style='color:#4286f4' onclick = 'test()'>X</span>
    <span class="close-button" style='color:#e29126' onclick = 'test()'>O</span>
  </div>
</div>

CSS:

.modal {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transform: scale(1.1);
        transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    }
    .modal-content {
      text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 1rem 1.5rem;
        width: 24rem;
        border-radius: 0.5rem;
    }
    .close-button {
        display: inline-block;
        margin: 0 auto;
        width: 1.5rem;
        line-height: 1.5rem;
        cursor: pointer;
        border-radius: 100%;
        border: 2px solid lightgray;
        padding: 20px;
        margin: 10px 15px 10px 15px;
        font-size:2em;
    }
    .close-button:hover {
        border: 2px solid #3fcc64;
    }
    .show-modal {
        opacity: 1;
        visibility: visible;
        transform: scale(1.0);
        transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
    }

Javascript:

// Modal
window.onload = function(){
  toggleModal();
};

var modal = document.querySelector(".modal");

function toggleModal() {
        modal.classList.toggle("show-modal");
    }


function test() {
  modal.classList.toggle("show-modal");
  player.team = 'X';
  console.log(player);
}

У меня также есть оверлей на странице, но я не думаю, что эти два находятся в конфликте ...

Спасибо за помощь!

Answer 1

Я скопировал и вставил ваш кодовый код и увидел, что в основном проекте отсутствует css to modal, и у вас также есть некоторая разметка html в вашем файле css.

Также ваш модал имеет класс модал , и он конфликтует с начальной загрузкой, которая также имеет класс модал . Вы должны дать другое имя. Даже с этим вы должны изменить свой CSS, потому что при начальной загрузке все элементы набирают box-sizing: border-box, так что это портит ваш CSS.