0

Привет.

Имеется всплывающее окно, по клику оно закрывается, но не могу сделать, чтобы оно автоматически закрывалось через какое-то время. Кто знает, подскажите.

<a class="clickMe"href="#">хочу чтоб по клику открылось окно</a>
<div class="overlay" title="окно"></div>
<div class="popup">
<div class="close_order">x</div>
    <p>Тут будет текст</p>
</div>

$(document).ready(function(){
        $('.popup .close_order, .overlay').click(function (){
            $('.popup, .overlay').css('opacity','0');
            $('.popup, .overlay').css('visibility','hidden');
        });
        $('a.clickMe').click(function (e){
            $('.popup, .overlay').css('opacity','1');
            $('.popup, .overlay').css('visibility','visible');
            e.preventDefault();
        });
    });

Попробовал так:

$(document).ready(function(){
                $('.popup .close_order, .overlay').click(function (){
                    $('.popup, .overlay').css('opacity','0');
                    $('.popup, .overlay').css('visibility','hidden');
                });
                $('a.clickMe').click(function (e){
                    $('.popup, .overlay').css('opacity','1');
                    $('.popup, .overlay').css('visibility','visible');
                    e.preventDefault();
                    setTimeout(function() {$(".overlay, .popup").fadeOut()}, 3000)
                });
            });

Закрывает, но повторно нажав на ссылку, ничего не открывается(

.overlay {
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 99999;
        -webkit-transition: opacity .5s;
        -moz-transition: opacity .5s;
        -ms-transition: opacity .5s;
        -o-transition: opacity .5s;
        transition: opacity .5s;
}
.popup {
    background-color: #fff;
    border: 3px solid #fff;
    display: inline-block;
    left: 50%;
    opacity: 0;
    padding: 15px;
    width: 300px;
    height: 323px;
    position: fixed;
    text-align: justify;
    top: 40%;
    visibility: hidden;
    z-index: 999999;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
    border-radius: 11px;
}
.popup .close_order {
    font-size: 13px;
    display: block;
    width: 6px;
    height: 17px;
    position: absolute;
    padding: 1px 9px 4px 9px;
    top: -15px;
    right: -15px;
    cursor: pointer;
    color: #fff;
    font-family: 'tahoma', sans-serif;
    background: -webkit-gradient(linear, left top, right top, from(#3d51c8), to(#051fb8));
    background: -webkit-linear-gradient(top, #3d51c8, #051fb8);
    background: -moz-linear-gradient(top, #3d51c8, #051fb8);
    background: -o-linear-gradient(top, #3d51c8, #051fb8);
    background: -ms-linear-gradient(top, #3d51c8, #051fb8);
    background: linear-gradient(top, #3d51c8, #051fb8);
    background-color: #3d51c8;
    border: 1px solid #061fb8;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.5);
}
.popup .close_order:hover {
    background: -webkit-gradient(linear, left top, right top, from(#051fb8), to(#3d51c8));
    background: -webkit-linear-gradient(top, #051fb8, #3d51c8);
    background: -moz-linear-gradient(top, #ff5f0, #3d51c87);
    background: -o-linear-gradient(top, #051fb8, #3d51c8);
    background: -ms-linear-gradient(top, #051fb8, #3d51c8);
    background: linear-gradient(top, #051fb8, #3d51c8);
    background-color: #051fb8;
    border: 1px solid #00385E;
}
.popup .close_order:active {
    background: #8f9be0;
}.overlay {
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 99999;
        -webkit-transition: opacity .5s;
        -moz-transition: opacity .5s;
        -ms-transition: opacity .5s;
        -o-transition: opacity .5s;
        transition: opacity .5s;
}
.popup {
    background-color: #fff;
    border: 3px solid #fff;
    display: inline-block;
    left: 50%;
    opacity: 0;
    padding: 15px;
    width: 300px;
    height: 323px;
    position: fixed;
    text-align: justify;
    top: 40%;
    visibility: hidden;
    z-index: 999999;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
    border-radius: 11px;
}
.popup .close_order {
    font-size: 13px;
    display: block;
    width: 6px;
    height: 17px;
    position: absolute;
    padding: 1px 9px 4px 9px;
    top: -15px;
    right: -15px;
    cursor: pointer;
    color: #fff;
    font-family: 'tahoma', sans-serif;
    background: -webkit-gradient(linear, left top, right top, from(#3d51c8), to(#051fb8));
    background: -webkit-linear-gradient(top, #3d51c8, #051fb8);
    background: -moz-linear-gradient(top, #3d51c8, #051fb8);
    background: -o-linear-gradient(top, #3d51c8, #051fb8);
    background: -ms-linear-gradient(top, #3d51c8, #051fb8);
    background: linear-gradient(top, #3d51c8, #051fb8);
    background-color: #3d51c8;
    border: 1px solid #061fb8;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.5);
}
.popup .close_order:hover {
    background: -webkit-gradient(linear, left top, right top, from(#051fb8), to(#3d51c8));
    background: -webkit-linear-gradient(top, #051fb8, #3d51c8);
    background: -moz-linear-gradient(top, #ff5f0, #3d51c87);
    background: -o-linear-gradient(top, #051fb8, #3d51c8);
    background: -ms-linear-gradient(top, #051fb8, #3d51c8);
    background: linear-gradient(top, #051fb8, #3d51c8);
    background-color: #051fb8;
    border: 1px solid #00385E;
}
.popup .close_order:active {
    background: #8f9be0;
}
7
  • Что-то я не пойму, а зачем вы показываете всплывающее окно, а через 3 секунды скрываете? Если я правильно вас понял, то попробуйте весь код внутри обработчика a.clickMe обернуть в setTimeout.
    – andreyqin
    14 сен 2014 в 21:43
  • @andreyqin, немного не понял, можете показать. Это у меня уведомление о том, что товар добавлен в корзину) __ @Deonis, не успел сказать, а почему при нажатии на добавить в корзину товар не добавляется, а сразу открывается окно, может, нужна задержка перед открытием, без окна все хорошо было). Прошу извинить, что здесь написал, там уже закрыто.
    – DimasikYES
    14 сен 2014 в 21:52
  • @DimasikYES, я не знаю, как вы добавляете в корзину, где храните данные (cookie, LocalStorage, etc.) но ясное дело, что нужно проверить для начала, добавился товар или нет, а уж потом сигнализировать.
    – Deonis
    15 сен 2014 в 0:13
  • @Deonis, попробую. Для начала сделаю проверку. Спасибо:)
    – DimasikYES
    15 сен 2014 в 0:21
  • @Deonis, Добрый день. Все таки задал вопрос, посмотрите пожалуйста:) hashcode.ru/questions/360924/… ____ @Deonis, спасибо, только вот при обновлении страницы уведомление Ваше о том, что товар добавлен, сразу выскакивает без нажатия на кнопку. Проверьте, пожалуйста, может что-то там не так.
    – DimasikYES
    15 сен 2014 в 14:37

1 ответ 1

2

Такой вариант:

var popup = $('.popup'),
    overlay = $('.overlay'),
    timer;
overlay.add($('.close_order',popup)).click(hidePopup);
$('a.clickMe').click(function (e){
    e.preventDefault();
    popup.add(overlay).finish().fadeIn(function(){
        clearTimeout(timer);
        timer = setTimeout(hidePopup, 3000);
    });
});
function hidePopup(){
    return popup.add(overlay).fadeOut();
}
8
  • @Deonis, большое спасибо!:) __ @Deonis, вот только не работает с моими стилями почему-то. Выше разместил, если что css.
    – DimasikYES
    14 сен 2014 в 22:48
  • @DimasikYES, поубирайте везде из css opacity и visibility, transition: opacity - тоже ни к чему для такого варианта. Для оверлея и модального окна, изначально в css: .overlay, .popup { display: none; }
    – Deonis
    14 сен 2014 в 23:24
  • @Deonis, вообщем я убрал, теперь окно появляется сразу, как обновишь страницу. Это из-за того, что убрал opacity: 0;, а с ними не работает тоже.
    – DimasikYES
    14 сен 2014 в 23:39
  • @DimasikYES, Вы задали по умолчанию display: none; для .overlay и .popup?
    – Deonis
    14 сен 2014 в 23:40
  • @Deonis, да.
    – DimasikYES
    14 сен 2014 в 23:44

Ваш ответ

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

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