Автозагрузка модального изображения с HTML, CSS и JS - PullRequest
Новая
       4

Автозагрузка модального изображения с HTML, CSS и JS

1 голос
/ 25 апреля 2020

Я пытаюсь добавить изображение, которое появляется для мобильных зрителей при входе на сайт. У меня есть приблизительное представление о вещах, которые должны go войти в код, но я точно не знаю, как все это собрать. Кто-нибудь может мне помочь или указать мне правильное направление?

Я использую коллектив go для создания своего сайта, если это поможет. Я хотел бы сделать что-то похожее на: https://badbadbadbad.com/ (при просмотре по телефону)

  • J

Ответы [ 2 ]

0 голосов
/ 25 апреля 2020

Простой подход может быть: скрипка . 

HTML:
<div class="regularBox"></div>
<div class="modalBox">
  <img src="https://cdn.pixabay.com/photo/2016/05/02/22/16/apple-blossoms-1368187_960_720.jpg">
  <span class="close">&times</span> <!--Click X to close-->
  </div>

JS: 
function showPopup() {
  document.querySelector('.modalBox').style.display = 'block';
}
showPopup(); // show modal image. 

function closePopUp() {
  document.querySelector('.modalBox').style.display = 'none';
}

document.querySelector('.close').addEventListener('click', closePopUp); // hide modal image

CSS: 
img {
  width: 80%;

}

.close {
  font-size: 50px;
  margin-left: -40px;
  cursor: pointer;
}

.modalBox {
  display: none;

}

.regularBox {
  z-index: -1; // placed behind modalbox
  position: absolute;
  background-color: pink; 
  width: 500px; 
  height: 400px;
0 голосов
/ 25 апреля 2020

Вы можете использовать функцию загрузки JavaScript, чтобы выполнить действие при загрузке страницы. Пример ниже просто показывает окно предупреждения с некоторым текстом, но это начало.

Разместите свой код, и мы поможем вам в дальнейшем. 

<!DOCTYPE html>
<html>
    <head>
        <title>Pop Up on Page Load</title>
        <script>
            document.onload(alert("This is my image."));
        </script>
    </head>
    <body>
        <p>This is my website.</p>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...