Question

我开始为爱好编码。我似乎无法在页面加载时弹出我的模态。我打开一个空白文档，它加载得很好。试图将它加载到我的朋友主页上，没有任何反应。我正在使用Dreamweaver CC。

HTML：

<!-- The Modal -->
<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
            <span class="close">&times;</span>
            <h2>Update</h2>
        </div>
        <div class="modal-body">
            <h3>Hello, we regret to inform you that we are closed today due to        currently upgrading our systems. We are working diligently on this matter. We want to continue to try and provide a fast and easy system for patients to be able to place their order. As always taking care of our patients and those in our community is our highest priority. We want to thank you for your loyalty and patience and we will try to resume business as quickly as possible. </h3>
            <h3>To stay updated with our current status and menu options follow us on Facebook.com/TheHumbleRoot and Instagram @humble_root. </h3>
        </div>
        <div class="modal-footer">
            <h3>We thank you for your patience</h3>
        </div>
    </div>
</div>

CSS：

/* The Modal (background) */

.modal {
    display: block;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    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.4);
    /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}


/* Add Animation */

@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}


    /* The Close Button */

    .close {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

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

    .modal-header {
        padding: 2px 16px;
        background-color: #5cb85c;
        color: white;
    }

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

    .modal-footer {
        padding: 2px 16px;
        background-color: #5cb85c;
        color: white;
    }

JS：

// Get the modal
var modal = document.getElementById('myModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
        modal.style.display = "none";
    }
    // When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

Answer 1

它可能是z指数，1太低;确保始终在其上放置一个大号以确保它出现在前面。

{
 z-index:999999999;
}

Answer 2

尝试在模态类上使用display: block代替display:"show"：

.modal {
     display: block;
}

show不是display属性的有效CSS值。

Answer 3

将display: "show";上的.modal（这是错误的）更改为display: block;：

<强> ---> Working Fiddle here <---

不知道为什么我的模态不会在页面加载时弹出

3 个答案: