0

хочу сделать картинку, которая показывается посетителю сайта через 1 минуту, а для выхода картинку нужно будет закрыть. Начал писать код, но не получается. Вот мой код:

$(function(){

var intervalID;

intervalID=setTimeout(
function() {
    $('#i').css({display:"block"});
}, 500);
clearInterval(intervalID);


});
1
  • @Пашка Босой, Постарайтесь писать более развернутые вопросы. Поясните, в чем вы видите проблему, как ее воспроизвести и т. д. 11 фев 2015 в 5:27

2 ответа 2

1
$(window).load(function(){
    $img = $('#image');
    setTimeout(function(){
        $img.show();
    },60000);
});
0

setTimeout(function(){ // Тамер, который покажет картинку через 5 секунд.
  $('#image').fadeIn(400);
}, 5000); // Замените 5000 на 60000 (это 1 минута)

$('#image .close').on('click', function(){ // При нажатии на X окно с картинкой закроется.
  $('#image').fadeOut(300);
});
#image {
  display: none;
  max-width: 100vw:
  max-height: 100vh;
  background: rgba(0,0,0,.25);
  overflow: hidden;
  z-index: 9999;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#image .close {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: red;
  color: #fff;
  font-size: 30px;
  font-family: monospace;
  font-weight: bold;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  cursor: pointer;
}

#image img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: relative;
  z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Подождите 5 секунд и увидете картинку.

<div id="image">
  <div class="close">X</div>
  <img src="//i.imgur.com/52vpKiD.png">
  Нажмите X чтобы закрыть.
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.