Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.10.2019, 16:34
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

Как добиться, чтобы прогресс бар в модальном окне запускался после клика по ссылке да
Здравствуйте. Подскажите, как сделать, чтобы прогресс бар, установленный в модальном окне, запускался именно после открытия пользователем данного окна, нажатием на ссылку, а не после загрузки страницы?
Сейчас прогресс бар запускается сразу после загрузки страницы.

Модальное окно с прогресс баром:
<div class="btn-box">
        <button type="button" class="btn btn-default" data-modal="modal">Показать popup</button>
    </div>
 
    <div class="overlay" data-close=""></div>
 
    <div id="modal" class="dlg-modal">
 
<progress id="progress" value="0" max="100"></progress>
 
    </div>
<script>var typeAnimate = 'fade';</script>


Скрипт окна:
;(function() {
 
    var overlay = document.querySelector('.overlay'),
        mOpen   = document.querySelectorAll('[data-modal]'),
        mStatus = false;
 
    if (mOpen.length == 0) return;
 
    [].forEach.call(mOpen, function(el) {
        el.addEventListener('click', function(e) {
            var modalId = el.getAttribute('data-modal'),
                modal   = document.getElementById(modalId);
 
            modalShow(modal);
        });
    });
 
 
 
    document.addEventListener('keydown', modalClose);
 
    function modalShow(modal) {
        overlay.classList.remove('fadeOut');
        overlay.classList.add('fadeIn');
        if (typeAnimate == 'fade') {
            modal.classList.remove('fadeOut');
            modal.classList.add('fadeIn');
        } else if (typeAnimate == 'slide') {
            modal.classList.remove('slideOutUp');
            modal.classList.add('slideInDown');
        }
        mStatus = true;
    }
 
    function modalClose(event) {
        if (mStatus && ( !event.keyCode || event.keyCode === 27 ) ) {
            var modals = document.querySelectorAll('.dlg-modal');
 
            [].forEach.call(modals, function(modal) {
                if (typeAnimate == 'fade') {
                    modal.classList.remove('fadeIn');
                    modal.classList.add('fadeOut');
                } else if (typeAnimate == 'slide') {
                    modal.classList.remove('slideInDown');
                    modal.classList.add('slideOutUp');
                }
            });
 
            overlay.classList.remove('fadeIn');
            overlay.classList.add('fadeOut');
            mStatus = false;
        }
    }
})();


Стили окна:
.overlay {opacity: 0; visibility: hidden; position:fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 110; background: rgba(255, 255, 255, 0.50);}
.dlg-modal {width: 576px; height: 300px; opacity: 0; visibility: hidden; text-align: center; position: fixed; left: 50%; top: 180px; z-index: 130; margin-left: -288px; padding: 47px 36px; background: #ffffff; -webkit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.5); box-shadow: 0 0 20px rgba(0,0,0,0.5); filter: alpha(opacity=0);}
 
.fadeIn, .fadeOut {-webkit-animation-duration: 0.4s; animation-duration: 0.4s; animation-timing-function: ease-out;}
 
.fadeIn {-webkit-animation-name: fadeIn; animation-name: fadeIn; opacity: 1; visibility: visible;}
 
.fadeOut {-webkit-animation-name: fadeOut; animation-name: fadeOut; opacity: 0; visibility: hidden;}


Скрипт прогресс бара
function getProgress(){
if(document.getElementById('progress').value>=document.getElementById('progress').max) return false;
document.getElementById('progress').value++;
setTimeout(getProgress,50);
}
getProgress();


Стили прогресс бара
progress {
border:0;
width: 300px;
height: 20px;
border-radius: 10px;
background: #f1f1f1;
}
progress::-webkit-progress-bar {
width: 300px;
height: 20px;
border-radius: 10px;
background: #f1f1f1;
}
progress::-webkit-progress-value {
border-radius: 10px;
background: #ffb76b;
}
progress::-moz-progress-bar {
border-radius: 5px;
background: #ffb76b;
}
Ответить с цитированием
  #2 (permalink)  
Старый 06.10.2019, 18:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Lefseq,
так перенесите getProgress(); в строку 33
Ответить с цитированием
  #3 (permalink)  
Старый 06.10.2019, 18:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Lefseq,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  progress {
border:0;
width: 300px;
height: 20px;
border-radius: 10px;
background: #f1f1f1;
}
progress::-webkit-progress-bar {
width: 300px;
height: 20px;
border-radius: 10px;
background: #f1f1f1;
}
progress::-webkit-progress-value {
border-radius: 10px;
background: #ffb76b;
}
progress::-moz-progress-bar {
border-radius: 5px;
background: #ffb76b;
}
.overlay {opacity: 0; visibility: hidden; position:fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 110; background: rgba(255, 255, 255, 0.50);}
.dlg-modal {width: 576px; height: 300px; opacity: 0; visibility: hidden; text-align: center; position: fixed; left: 50%; top: 180px; z-index: 130; margin-left: -288px; padding: 47px 36px; background: #ffffff; -webkit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.5); box-shadow: 0 0 20px rgba(0,0,0,0.5); filter: alpha(opacity=0);}

.fadeIn, .fadeOut {-webkit-animation-duration: 0.4s; animation-duration: 0.4s; animation-timing-function: ease-out;}

.fadeIn {-webkit-animation-name: fadeIn; animation-name: fadeIn; opacity: 1; visibility: visible;}

.fadeOut {-webkit-animation-name: fadeOut; animation-name: fadeOut; opacity: 0; visibility: hidden;}

  </style>

</head>

<body>
<div class="btn-box">
        <button type="button" class="btn btn-default" data-modal="modal">Показать popup</button>
    </div>

    <div class="overlay" data-close=""></div>

    <div id="modal" class="dlg-modal">

<progress id="progress" value="0" max="100"></progress>

    </div>
<script>var typeAnimate = 'fade';
function getProgress(){
if(document.getElementById('progress').value>=document.getElementById('progress').max) return false;
document.getElementById('progress').value++;
setTimeout(getProgress,50);
}
getProgress();

;(function() {

    var overlay = document.querySelector('.overlay'),
        mOpen   = document.querySelectorAll('[data-modal]'),
        mStatus = false;

    if (mOpen.length == 0) return;

    [].forEach.call(mOpen, function(el) {
        el.addEventListener('click', function(e) {
            var modalId = el.getAttribute('data-modal'),
                modal   = document.getElementById(modalId);

            modalShow(modal);
        });
    });



    document.addEventListener('keydown', modalClose);

    function modalShow(modal) {
        overlay.classList.remove('fadeOut');
        overlay.classList.add('fadeIn');
        if (typeAnimate == 'fade') {
            modal.classList.remove('fadeOut');
            modal.classList.add('fadeIn');
        } else if (typeAnimate == 'slide') {
            modal.classList.remove('slideOutUp');
            modal.classList.add('slideInDown');
        }
        mStatus = true;
        getProgress();
    }

    function modalClose(event) {
        if (mStatus && ( !event.keyCode || event.keyCode === 27 ) ) {
            var modals = document.querySelectorAll('.dlg-modal');

            [].forEach.call(modals, function(modal) {
                if (typeAnimate == 'fade') {
                    modal.classList.remove('fadeIn');
                    modal.classList.add('fadeOut');
                } else if (typeAnimate == 'slide') {
                    modal.classList.remove('slideInDown');
                    modal.classList.add('slideOutUp');
                }
            });

            overlay.classList.remove('fadeIn');
            overlay.classList.add('fadeOut');
            mStatus = false;
            document.getElementById('progress').value = 0;
        }
    }
})();


</script>

</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 06.10.2019, 20:39
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

рони,
Спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как убрать боковой скрол в модальном окне? pahannew Элементы интерфейса 6 08.01.2013 13:13
Как сделать исчезание рекламы после клика по ней rembo1978 Элементы интерфейса 1 10.11.2012 05:27
Как сделать пункт в выпадающем списке по умолчанию, после перехода по ссылке? Damian Элементы интерфейса 18 24.09.2012 18:17
Как сделать чтобы ссылки открывались в родительском окне infom@n Общие вопросы Javascript 2 02.10.2011 00:05
Как сделать чтобы картинка не открывалась по ссылке а скачивалась test Общие вопросы Javascript 4 20.06.2009 08:35