Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.08.2020, 16:11
Новичок на форуме
Отправить личное сообщение для Malinka25 Посмотреть профиль Найти все сообщения от Malinka25
 
Регистрация: 13.08.2020
Сообщений: 4

Что делать, чтобы нажав за пределы всплывающего окна оно не закрывалось?
Здравствуйте, нужна помощь. На сайте есть всплывающее окно, мне нужно, чтобы человек не смог закрыть его нажав за пределы этого окна.

;(function() {
    var overlay     = document.getElementById('overlay'),
        mOpen       = document.querySelectorAll('[data-modal]'),
        mClose      = document.querySelectorAll('[data-close]'),
        outer       = document.querySelector('.modal-outer'),
        modals      = document.querySelectorAll('.modal-outer > div'),
        duration    = 400,
        mStatus     = false,
        h           = null;
 
    if (mOpen.length == 0) return;
 
    setTopOuter();
 
    function setTopOuter() {
        outer.style.top = -outer.offsetHeight + 'px';
    }
 
    [].forEach.call(mOpen, function(el) {
        el.addEventListener('click', function(e) {
            var modalId = el.getAttribute('data-modal'),
                modal   = document.getElementById(modalId);
            modalShow(modal);
        });
    });
 
    [].forEach.call(mClose, function(el) {
        el.addEventListener('click', modalClose);
    });
 
    document.addEventListener('keydown', modalClose);
 
    function modalShow(modal) {
        mStatus = true;
        overlay.classList.remove('fadeOut');
        overlay.classList.add('fadeIn');
        modal.style.display = 'block';
 
        var start       = new Date().getTime(),
            startTop    = outer.getBoundingClientRect().top,
            finalTop    = (window.innerHeight - outer.offsetHeight) / 2,
            offset      = outer.offsetHeight + finalTop;
 
        var fn = function() {
            var now     = new Date().getTime() - start,
                currTop = Math.round(startTop + offset * now / duration);
 
            currTop = (currTop > finalTop) ? finalTop : currTop;
            outer.style.top = currTop + 'px';
 
            if (currTop < finalTop) {
                requestAnimationFrame(fn);
            }
        }
        requestAnimationFrame(fn);
        window.addEventListener('resize', setTopOpenOuter);
    }
 
    function modalClose(event) {
        if (mStatus && ( !event.keyCode || event.keyCode === 27 ) ) {
            mStatus = false;
 
            var start       = new Date().getTime(),
                startTop    = outer.getBoundingClientRect().top,
                finalTop    = -outer.offsetHeight,
                offset      = outer.offsetHeight + (window.innerHeight - outer.offsetHeight) / 2;
 
            var fn = function() {
                var now     = new Date().getTime() - start,
                    currTop = Math.round(startTop - offset * now / duration);
 
                currTop = (currTop < finalTop) ? finalTop : currTop;
                outer.style.top = currTop + 'px';
 
                if (currTop > finalTop) {
                    requestAnimationFrame(fn);
                } else {
                    overlay.classList.remove('fadeIn');
                    overlay.classList.add('fadeOut');
                    [].forEach.call(modals, function(modal){
                        modal.removeAttribute('style');
                    });
                }
            }
            requestAnimationFrame(fn);
            window.removeEventListener('resize', setTopOpenOuter);
        }
    }
 
    function setTopOpenOuter() {
        outer.style.top = (window.innerHeight - outer.offsetHeight) / 2 + 'px';
    }
})();
 
 
var win_top = 0;
$(document).ready(function(){
    
    // открываем модальное окно при клике по контенту
    $('#list').click(function(){
        popup_open('#myPopup');
    })
    
// открываем модальное окно через 1,5сек после загрузки страницы
 setTimeout(function() {  
      popup_open('#myPopup');  
        }, 2000);
    
    // Добавляем обработчик закрытия модального окна
    $(document).on('click', '.popup .close, .overflow', function(){
        popup_close()
        return false;
    })
    
})
function popup_open(selector){
    if (selector.length){
        win_top = $(window).scrollTop();
        $('#list').css({
            'position'  : 'fixed',
            'left'      : '0',
            'right'     : '0',
            'top'       : '0',
            // Добавляем смещение, чтобы на фоне была именно та часть, что просмаривал пользователь
            'margin-top': '-'+win_top+'px' 
        })
        $('.overflow,'+selector).fadeIn();
    }
}
function popup_close(){
    $('.overflow, .popup').hide();
    $('#list').css({
        'position'  : 'static',
        'margin-top': '0px'
    })
    // Возвращаем скролл на место
    $(window).scrollTop(win_top);
}


<div class="overflow">
            <!-- Затемнение -->
        </div>
        <div class="popup" id="myPopup">
            <a href="#" class="close"></a>
            <div class="popup_title">Модальное окно</div>
</div>


/*Затемнение */
.overflow{
    background: rgba(0, 0, 0, 0.7);
    position:fixed;
    top: 0px;bottom: 0px;
    left: 0px;right: 0px;
    z-index:100;
    display:none;
}
/* модальное окно */
.popup{
    position:absolute;
    z-index:101;
    background: #ffffff;
    width: 435px;
    min-height: 226px;
    margin-left: -218px;
    padding: 20px;
    top: 10%;
    left: 50%;
    display:none;
    border: 0;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px; 
 border-radius: 5px;
}
 
.popup .close{
    position:absolute;
    top: 10px;
    right: 10px;
    display:block;
    width: 17px;
    height: 17px;
    opacity: 0.5;
    background: url(../img/close.png) no-repeat center;
    -webkit-transition:opacity 0.5s;
    -moz-transition:opacity 0.5s;
    transition:opacity 0.5s;
}
.popup .close:hover{
    opacity: 0.8;
}
Ответить с цитированием
  #2 (permalink)  
Старый 13.08.2020, 17:29
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,750

Попробуйте строку 110
$(document).on('click', '.popup .close, .overflow', function(){

заменить на

$(.close).on('click', function(){

если закрывать нужно только по нажатии кнопки close.

Но непонятно, к чему относятся строки 1-93?

Последний раз редактировалось voraa, 13.08.2020 в 21:44.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Мой собственный башорг в скайпе))) devote Оффтопик 81 03.10.2012 00:56
Психологическая деформация программистов DreamTheater Оффтопик 59 24.03.2012 05:03
http://gigalit.info - Мои контакты Маэстро Ваши сайты и скрипты 70 08.12.2011 03:12
фрактальный сыр x-yuri Оффтопик 76 23.11.2011 21:59
О фрилансе (Личный опыт) free Оффтопик 105 18.08.2011 17:02