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 that you have read and understand our privacy policy and code of conduct.

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