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

现在，我有两个问题：

每当模态框打开时，它都会从底部向特定速度打开。我需要的是，降低打开弹出窗口的速度。
此外，每当我关闭弹出窗口时，它都没有为它打开的方式设置动画，也就是说，它不会从顶部向底部移动，而是立即关闭。如何保持关闭弹出窗口的无缝行为与打开它的速度相同。

我尝试了什么？

我尝试将属性transitions: opacity 1.5s linear放在.modal{} css中，但似乎无法正常工作

注意：我需要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/

如何让模态弹出窗口以低速打开和关闭？

1 个答案: