0

Есть кнопка закрытия окна

введите сюда описание изображения

Есть код, всплывающего окна

$(function() {

    $('.close-over, .close-undermodal').on('click', function (e) {
        // $('#comebacker').fadeOut(300); // 300 скорость исчезновения | disappear speed
        // console.log(e);
        let comebackerwindow=document.getElementById('comebacker');
        comebackerwindow.style.display='none';    
        // $('#comebacker').style.display='none';
        $('body').removeClass('comebackerhidden');
    });


    var comebacker = true;

    /*
    $(window).mouseout(function(e){
        if(e.pageY - $(window).scrollTop() < 1 && comebacker == true){
            $('#comebacker').fadeIn(300); 
            $('body').addClass('comebackerhidden');
            comebacker = false;
        }
    });
    */

    $(window).on('popstate',function(e){
        e.preventDefault();
        if(comebacker==true) {
            $('#comebacker').fadeIn(300);
            $('body').addClass('comebackerhidden');
            comebacker = false;
        }
    });

    $(window).on('beforeunload',function(e){
        e.preventDefault();
        if(comebacker==true) {
            $('#comebacker').fadeIn(300);
            $('body').addClass('comebackerhidden');
            comebacker = false;
        }
    });

    try {
        setTimeout(
            function show_comebacker() {
                $('#comebacker').fadeIn(300); // 300 скорость появления | appear speed 
                $('body').addClass('comebackerhidden');
            }, 3000 //Время появления в милисекундах | Appear time in milliseconds
        )
    }
    catch (e) {}
});
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=cyrillic-ext,latin-ext);

/* modal */
#comebacker {
    background: url(img/bgexit.png);
    position: fixed;
    left: 0;
    top: 0; 
    z-index: 9999;
    width: 100%;
    height: 100%; 
    overflow: auto;
/*  display: none;*/
}   

#comebacker .close-undermodal {
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
}

#comebacker .close-over {
    background: url('https://i.stack.imgur.com/V4oWi.png') no-repeat 0 0;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

#comebacker .close-over:hover {
    background-position: 0 bottom;
} 

#comebacker .over-window {
    background: url(img/product.png) no-repeat 40px center #fff;
    cursor: default;
    left: 0;
    right: 0; 
    top: 10%;
    margin: 0 auto 20px auto;
    position: fixed;
    padding: 60px 20px 60px 20px;
    width: 560px;
    z-index: 9999;
    position: relative;
    font-family: 'PT Sans',arial,sans-serif !important;
} 

#comebacker .title-comebacker {
    font-size: 28px;
    font-weight: 700;
    color: #000;
    text-align: center;
    padding: 0 0 30px 0;
    margin: 0 0 0 50%;
}

#comebacker .title-oui div{
    font-size: 20px;
}

#comebacker .form {
    margin: 0 0 0 50%;
}

#comebacker .form form {
    margin: 0 !important;
}

#comebacker .form input[type="text"] {
    background: #fff;
    border: 1px solid #a5a5a5;
    outline: none;
    height: 45px;
    line-height: 45px;
    font-size: 18px;
    font-family: 'PT Sans',arial,sans-serif;
    width: 250px;
    box-sizing: border-box;
    border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    padding: 0 20px;
    display: block;
    margin: 0 auto 20px auto;
}

#comebacker .form input[type="text"]:focus {
    border: 1px solid #054155;
}

#comebacker .form input[type="submit"] {
    background: #054155;
    cursor: pointer;
    border-radius: 5px;
    -moz-border-radius: 5px;
    outline: none;
    height: 50px;
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 700;
    font-family: 'PT Sans',arial,sans-serif;
    width: 250px; 
    display: block;
    margin: 0 auto 0 auto;
    border: 0px;
    color: #ffffff;
}

#comebacker .form input[type="submit"]:hover {
    background: #10a9dc;
}

.comebackerhidden {
    overflow: hidden;
}
<!doctype html>
<html>
<head>
    <title>Comebacker</title>
    <link type="text/css" rel="stylesheet" href="comebacker/css.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script
    <script type="text/javascript" src="comebacker/script.js"></script>
    <!--<script src="jquery-3.6.1.min.js"></script>-->
    <!--<script src="myPopupWindow.js"></script>-->
</head>
<body>
TestContent
<a href="www.google.ru">Google</a>
<div id="comebacker">
    <div class="close-undermodal"></div>
    <div class="over-window">
        <div class="close-over"></div>
        <div class="title-comebacker">
            <div>Order today!</div>
            Only: 15 $.
            <div>50% discount</div>
        </div>
        <div class="form">
            <form method="post" action="">
                <input type="text" name="name" value="" placeholder="Name" />
                <input type="text" name="phone" value="" placeholder="Phone" />
                <input type="submit" name="submit" value="Order" />
            </form>
        </div>
        <div class="clear"></div>
    </div>
</div>
</body>
</html>

Не срабатывает кнопка закрытия (крестик) окна #comebacker. Подскажите, как добиться функционирования кнопки.

1 ответ 1

1

У Jquery объекта нет свойств и методов объектов из простого JS, поэтому у него просто не может быть свойства .style

Можно в данном случае просто сделать вот так:

$('#comebacker').hide();

Если нужен именно .style, тогда надо испльзовать либо document.querySelector, либо document.getElementById

10
  • я обновил вопрос 22 сен 2022 в 16:41
  • @vladwebsearch так и что? там вё работает вполне 22 сен 2022 в 17:35
  • у вас все работает? 23 сен 2022 в 10:01
  • Ну если я пишу, что работает....Откройте сниппет у себя же в вопросе и посмотрите 23 сен 2022 в 10:10
  • 1
    @vladwebsearch если убрать console log, который убивает всю работу напрочь, то можно будет увидеть что всё работает 23 сен 2022 в 12:06

Ваш ответ

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

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