如何使模式彈出窗口緩慢打開和關閉？

Question

我有以下實現的模式彈出窗口：

這是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}
}

現在在這里，我有兩個問題：

1. 每當“模態”框打開時，它就會以一定的速度從底部向底部打開。 我需要的是降低打開此彈出窗口的速度。
2. 另外，每當我關閉彈出窗口時，它就不會動畫化它的打開方式，也就是說，它不會從頂部向底部移動，而是會立即關閉。 如何保持無縫關閉行為，使彈出窗口的打開速度與打開速度相同。

我嘗試了什么？

我嘗試進行屬性transitions: opacity 1.5s linear .modal{} css中transitions: opacity 1.5s linear ，但它似乎沒有用

注意：我有所有必需的jquery庫，bootstrap庫包含在頁面的頁眉中。

我也嘗試了fadeIn和fadeOut方法，但是它沒有給我想要的行為，而是我的模式框在打開時閃爍

Answer 1

關於標記重復的問題，我通過擴展使用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/