Как открыть и закрыть модальное всплывающее окно на медленной скорости? - PullRequest
Новая
       6

Как открыть и закрыть модальное всплывающее окно на медленной скорости?

0 голосов
/ 31 мая 2018

У меня есть модальное всплывающее окно с реализацией ниже:

вот JSfiddle: https://jsfiddle.net/6m10g8kh/4/

HTML: 

 <div id="modalDeliveryAddress" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
            <div class="modal-header">
                <span class="close" onclick="closeModal('modalDeliveryAddress');">&times;</span>
                <h2>Your new delivery address</h2>
            </div>
            <div class="modal-body">
                <div class="delivery-popup clearfix">
                    <div class="delivery-container">
                        <div style="padding-top:25px;"></div>
                        <input type="text" name="floor_no" class="form-control" id="floor-info" placeholder="Floor/Unit No.">

                        <input type="text" name="block_no" class="form-control" id="block-info" placeholder="Block No.">

                        <input type="text" name="street_name" class="form-control" id="street-info" placeholder="Street Name">

                        <input type="text" name="zip_code" class="form-control bfh-phone" data-format="ddddd" id="zip_info" maxlength="5" placeholder="Zip Code">
                        <div style="padding-top:25px;"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">

                <a class="btn cancelBtn pull-left" href="#" data-dismiss="modal" id="btnCancel1" onclick="closeModal('modalDeliveryAddress');">Cancel</a>
                <a id="submitAdd" class="btn continue pull-right" href="#" name="submitAdd">Submit</a>

            </div>
        </div>

    </div>

JS: 

function openModal(modal_Id) {
        var modalId = $('#' + modal_Id);
            modalId.show();
}

function closeModal(modal_Id) {
        var modalId = document.getElementById(modal_Id);
        modalId.style.display = "none";
}

window.onclick = function (event) {

        switch (event.target.id) {
            case 'modalDeliveryAddress':
                document.getElementById(event.target.id).style.display = "none";
                break;
            case 'modalCCDetails':
                document.getElementById(event.target.id).style.display = "none";
                break;
            case 'modalDlvSchedule':
                document.getElementById(event.target.id).style.display = "none";
            default:
                break;
        }
    }

CSS: 

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
    -webkit-animation-name: fadeIn; /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s;

}

/* Modal Content */
.modal-content {
    position: fixed;
    bottom: 0;
    background-color: #fefefe;
    width: 92%;
    left:14px;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s;
    border-radius: 16px 16px 0px 0px !important;
}

/* The Close Button */
.close {
    color: #000;
    float: right;
    font-size: 28px;
    font-weight: bold;
}


a.cancelBtn{
    font-size: 20px !important;
    /* width: 300px;
    height: 45px; */
    background-color: #ffffff;
    border: solid 1px #e7e9ea;
    color:#ed1a3d;
    cursor: pointer !important;
    text-align: center;
    display: inline-block;
    width: 50%;
    height: auto;
    line-height: 40px;
}

a.continue, a.continue:visited {
    font-size: 20px !important;
    /* width: 300px;
    height: 45px; */
    background-color: #ed1a3d;
    border: solid 1px #e7e9ea;
    color:#ffffff;
    cursor: pointer !important;
    text-align: center;
    margin-left: 0px !important;
    height: auto;
    line-height: 40px;
    width: 166px;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 20px 14px 36px;
    background-color: #00b9e3;
    color: white;
    border-radius: 16px 16px 0px 0px !important;
    text-align: center;
    height:60px;
}

.modal-header h2{
    font-size: 20px !important;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 0px;
    background-color: white;
    color: white;
}

/* Add Animation */
@-webkit-keyframes slideIn {
    from {bottom: -300px; opacity: 0} 
    to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}

Теперь у меня есть 2 проблемы:

  1. Всякий раз, когда модальная коробка открывается, она открывается снизу вверх с определенной скоростью.Что мне нужно, так это уменьшить скорость открытия этого всплывающего окна.
  2. Кроме того, всякий раз, когда я закрываю свое всплывающее окно, оно не анимирует способ его открытия, то есть оно не закрывается, перемещаясь изсверху вниз, скорее он мгновенно закрывается.Как сохранить плавное закрытие всплывающего окна с той же скоростью, с которой оно открывается.

Что я пробовал?

Я пытался выставить свойство transitions: opacity 1.5s linear в .modal{} css, но, похоже, он не работает

Примечание: У меня есть вся необходимая библиотека jquery, библиотека начальной загрузки включена в заголовок страницы.

Я также попробовал методы fadeIn и fadeOut, но это не дает мне желаемого поведения, скорее, моё модальное окно мерцает, когда открывается

1 Ответ

0 голосов
/ 31 мая 2018

Что касается дублированного вопроса с тегами, я нашел решение, расширив решение с помощью fadeIn/fadeOut('slow').Ниже приведены особенности, необходимые для его реализации:

CSS: 

.modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
        -webkit-animation-name: fadeIn; /* Fade in the background */
        -webkit-animation-duration: 1.2s;
    }

    /* Modal Content */
    .modal-content {
        position: fixed;
        bottom: 0;
        background-color: #fefefe;
        width: 92%;
        left:14px;
        -webkit-animation-name: slideIn;
    -webkit-animation-duration: 1s;
        border-radius: 16px 16px 0px 0px !important;
    }

В приведенном выше CSS я настроил -webkit-animation-duration: 1.2s; для .modal класса и -webkit-animation-duration: 1s; в .modal-content классе

Чтобы отобразить и скрыть модальное поле, которое я использовал ниже, фрагмент JS:

JS 

<script>
    function openModal(modal_Id) {
            var modalId = $('#' + modal_Id);
                modalId.fadeIn('slow');
     /* modalId.show() */;
    }

    function closeModal(modal_Id) {
    var modalId = $('#' + modal_Id);
                modalId.fadeOut('slow');
                /* modalId.hide() */;
    }

    window.onclick = function (event) {

            switch (event.target.id) {
                case 'modalDeliveryAddress':
                   $('#' + event.target.id).fadeOut('slow'); 
                    break;
                default:
                    break;
            }
        }
    </script>

ПолныйРабочая реализация доступна здесь: https://jsfiddle.net/2cwwe0p4/1/

...