Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 14.04.2023, 18:25   #1
Roxy69
Новичок
Джуниор
 
Регистрация: 14.04.2023
Сообщений: 1
По умолчанию Некорректный скрипт для закрытия блока

Здравствуйте! Подскажите, пожалуйста, как правильно прописать скрипт для кнопки закрытия попап-окна в данном коде?
Сейчас при раскрытии окна не вылезает крестик закрытия под назначенным классом .close-wheel, так что закрыть этот блок невозможно и выйти обратно на сайт нельзя.
За "крестик" отвечает участок кода в самом низу под //Скрыть блок
Что и где здесь не так?

Код:
<script>
$( document ).ready(function() {
    
//Список секторов : Цвет - Текст - ссылка на иконку    
let wheelOption = [
    ['#F59CA9' , '-1000 руб<br>любая услуга' , 'https://static.tildacdn.com/tild3732-3366-4666-b137-636632616132/901435.svg'],
    ['#BF75BA' , 'Массаж лица<br>в подарок' , 'https://static.tildacdn.com/tild6564-3832-4466-a662-333733396635/3189701.svg'],
    ['#F59CA9' , '-10%<br>любая услуга' , 'https://static.tildacdn.com/tild3364-3432-4437-b065-663536363437/4062925.svg'],
    ['#BF75BA' , 'Зона S<br>бесплатно' , 'https://static.tildacdn.com/tild6631-3132-4330-b130-643839333161/3989895.svg'],
    ['#F59CA9' , '-15%<br>любая зона' , 'https://static.tildacdn.com/tild3830-3439-4764-b831-313939346337/3095126.svg'],
    ['#BF75BA' , '30 мин<br>массажа' , 'https://static.tildacdn.com/tild6239-3933-4839-a666-303739343233/1404945.svg'],
    ['#F59CA9' , 'Карбокситерапия<br>для лица' , 'https://static.tildacdn.com/tild6666-3931-4639-b563-306134666563/2513205.svg'],
    ['#BF75BA' , '-50%<br>массажа' , 'https://static.tildacdn.com/tild3035-3230-4136-a235-316639663465/2333041.svg'],
    
];
 
 
    setTimeout(function(){
        window.dispatchEvent(new Event('resize'));
    }, 1000);
 
 
//Создаём элемент в Zero
let sector = wheelOption.length;
$('.wheelfortune').append('<div class="wheel_wrp"></div>');
$('.wheelfortune').html($('.wheel_wrp'));
let wheelRec = $('.wheelfortune').closest('.t-rec');
wheelRec.addClass('wheel-pos slide-wheel');
$('.close-wheel').fadeOut(200);
//Кол-во оборотов до остановки
let maxRevolution = 20;
//Время вращения
let spinTime = 5;
let spinFinish = false;
let resizeTxt;
let diameter;
 
//Создание колеса
function creatingWheel(){
//Диаметр колеса
diameter = $('.wheel_wrp').width();
//Угол сектора
let angle = Number(((360*Math.PI)/(sector*180)).toFixed(3));
//Катет сектора
let sectorHalfWidth = 0.5*diameter*Math.tan(angle/2);
//Заполняем сектора
for (let i=0; i<sector; i++){
$('.wheel_wrp').append('<div class="wheel_sector bg-sector'+i+'"></div><div class="wheel_line line-sector'+i+'"></div><div class="wheel_textcont text-sector'+i+'"><div></div><img src='+wheelOption[i][2]+'></div>');
//Формируем угол поворота и задаём цвет
$('.bg-sector'+i+'').css({
    "transform":"rotate("+(360*i/sector+90)+"deg)",
    "border-color": ""+wheelOption[i][0]+" transparent"
});
//Отрисовка границ сектора
$('.line-sector'+i+'').css({
    "width" : diameter/2+"px",
    "transform" : "rotate("+((360*i/sector)+(180*(sector-1))/sector)+"deg)",
    "height":"4px",
    "top" : "calc(50% - 2px)",
    "transform-origin" : diameter/2+"px 2px"
});
//Расставляем текст
$('.text-sector'+i+' div').html(wheelOption[i][1]);
// Формируем угол для текста
$('.text-sector'+i+'').css({"transform":"rotate("+(360*i/sector+90)+"deg)"});
};
//Форма сектора
$('.wheel_sector').css({
    "border-width": (diameter/2)+"px "+sectorHalfWidth+"px 0",
    "transform-origin": ""+sectorHalfWidth+"px "+(diameter/2)+"px",
    "left":((diameter/2)-sectorHalfWidth)+"px"
});
//Форма текста
$('.wheel_textcont').css({
    "width": (diameter/2)+"px",
    "height": (diameter/2)+"px",
    "transform-origin": ""+(diameter/4)+"px "+(diameter/2)+"px",
    "left":((diameter/2)-(diameter/4))+"px",
});
}; creatingWheel();
 
//Вращение колеса
function spinWheel(deg){
    $('.wheel_wrp').css({
       "height": diameter+"px",
       "transform" : "rotate("+deg+"deg)",
       "transition": "transform "+spinTime+"s cubic-bezier(0, 0.76, 0.5, 1.01)"
    });
};spinWheel(0);
//Случайный сектор    
function getRandomInRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
let finalSector = -1;
//При нажатии на кнопку вращения
$('.spin_wheel .tn-atom').click(function(e) {
    //Получаем финальный сектор 
    finalSector = getRandomInRange(0, sector-1);
    //Поворачиваем колесо
    spinWheel(maxRevolution*360 +  (finalSector*360)/sector );
    if (finalSector==0) finalSector=sector;
    //Выводим текст и картинку
    setTimeout(function(){
    let prizTxt = wheelOption[sector-finalSector][1];
    let prizeImg = wheelOption[sector-finalSector][2];
    spinFinish = true;
    finalStep('Ваш приз:<br>'+prizTxt, prizeImg);
    //Сохраняем результат
    let finalResult  = {
        text: prizTxt , 
        img: prizeImg ,
        sect:finalSector
    };
    localStorage.setItem('_code_w', JSON.stringify(finalResult));
    }, spinTime*1000);
});
  
//Проверка прошлого вращения
let prevResult = localStorage.getItem('_code_w');let prevList;
let prevSend = localStorage['_wh_send'];
if (prevResult) {
    prevList = JSON.parse(prevResult);
    spinFinish = true;
    $('.wheel_form button').attr('type','submit');
    let preffTxt = '<u>Ваш прошлый приз</u><br>';
    if(prevSend){
        preffTxt = '<u>Заявка уже была отправлена</u><br>';
        blockForm();
        spinFinish = false;
    };
    finalStep(preffTxt+prevList.text, prevList.img);
    spinWheel( (prevList.sect*360)/sector );
};
 
//Блокируем форму
function blockForm(){
if(!prevResult || prevSend ){
$('.wheel_form').addClass('form_noactive');
setTimeout(function(){$('.wheel_form button').attr('type','button')}, 3500);
};
};blockForm();
 
//Отправка формы
$('.wheel_form').delegate(".t-submit", "click", function(){
    setTimeout(function(){
        if ( $('.wheel_form .t-form').hasClass("js-send-form-success")){
            localStorage['_wh_send'] = 'sf';closeWheel();blockForm();
        };
    }, 1000);
});
 
//Отрисовка финального шага
function finalStep(prizTxt, prizeImg){
    //Удаляем кнопку
    $('.spin_wheel').remove();    
    $('.present_text .tn-atom').html(prizTxt);
    $('.present_img img').attr({
        'data-original':prizeImg,
        'src':prizeImg
    });
    //Открываем форму
   if(spinFinish){ 
    $('.wheel_form').removeClass('form_noactive');
    $('.wheel_form button').attr('type','submit');
   };
    //Заполняем поле
    setTimeout(function(){
        resizeTxt = prizTxt.replace(/<\/?[^>]+>/g,' ');
        $('input[name="sector_prize"]').val(resizeTxt);
    }, 2500);
};
//Изменение размера окна
$( window ).resize(function() {
clearTimeout(window.resizedFinished); 
window.resizedFinished = setTimeout(function(){
    
    setTimeout(function(){
        window.dispatchEvent(new Event('resize'));
    }, 1000);
    
    $('.wheel_wrp').empty();creatingWheel();
    if(finalSector>=0) { spinWheel( (finalSector*360)/sector )
    }else if (prevResult) {
        spinWheel( (prevList.sect*360)/sector );
    }else{spinWheel();};
    setTimeout(function(){    
        if(!spinFinish){  $('.wheel_form button').attr('type','button');
        }else{ $('input[name="sector_prize"]').val(resizeTxt) };
    }, 3500);    
}, 500);
});  
 
//Показать блок
setTimeout(function(){
  $('body').addClass('wheel-open-body');
  wheelRec.addClass('wheel-time').removeClass('slide-wheel');
  if(firstOpen && !prevResult ) {spinWheel(360); firstOpen = false};
  setTimeout(function(){
     $('.close-wheel').fadeIn(200);
  }, 550);
}, 30000);
 
//Скрыть блок
function closeWheel(){ $('body').removeClass('wheel-open-body');$('.close-wheel').fadeOut(0); wheelRec.addClass('slide-wheel');};
$('.close-wheel').click(function(){closeWheel();});
$(document).keydown(function(eventObject){
    if(eventObject.which == 27 && !wheelRec.hasClass('slide-wheel')){closeWheel()};
});
});
</script>
Roxy69 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Установка блока внизу блока родителя, без использования "relative" Bulat Ibrahim HTML и CSS 21 29.05.2017 23:58
некорректный подсчет МаксМСК C# (си шарп) 3 26.09.2014 15:32
Blowfish (резервирование дополнительного байта для блока, говорящий о длине блока) ITdocer Общие вопросы C/C++ 0 21.05.2014 15:40
Некорректный шаблон dragon666999 HTML и CSS 8 05.02.2013 16:07
Скрипт появления и исчезновения блока div и привязка его к времени видео. chamer2010 JavaScript, Ajax 0 29.02.2012 17:24