這里有幾個問題：
沒有引用 jQuery 庫
你省略了一個.login-overlay.active類，沒有設置默認.login-overlay值hidden
為確保模式默認對用戶可見，請將active類添加到元素的 html
看起來你復制了一個例子，但不一定知道每個部分是如何工作的。我已經(jīng)評論了下面的工作代碼以指示進行了更改的位置。
//appends an "active" class to .popup and .popup-content when the "Open" button is clicked
$(".open").on("click", function() {
$(".popup-overlay, .popup-content, .login-overlay").addClass("active");
});
//removes the "active" class to .popup and .popup-content when the "Close" button is clicked
$(".close, .popup-overlay, .login-overlay").on("click", function() {
$(".popup-overlay, .popup-content, .login-overlay").removeClass("active");
});
.login-overlay {
/* DEFAULT HIDDEN - LIKE THE EXAMPLE */
visibility: hidden;
position: absolute;
flex-direction: row;
z-index: 1;
position: absolute;
top: 100px;
right: 100px;
background-color: white;
width: 286px;
height: 266px;
padding: 20px;
box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.3);
.opacity: 0;
animation-name: fadein;
animation-duration: 3s;
animation-fill-mode: forwards;
}
/* COPIED FROM EXAMPLE MODAL - LIKE THE EXAMPLE*/
.login-overlay.active {
/*displays pop-up when "active" class is present*/
visibility: visible;
}
.login-overlay::before {
top: -9px;
left: 200px;
content: " ";
border-color: blue;
transform: rotate(-45deg);
border-width: 8px;
box-shadow: 2px -2px 3px 0px rgba(0, 0, 0, 0.15);
content: " . ";
position: absolute;
width: 18px;
height: 18px;
color: white;
background-color: white;
}
.login-overlay--content {
font-size: 12px;
}
login-overlay.active {
/*displays pop-up when "active" class is present*/
visibility: visible;
text-align: center;
}
/* Modal Content/Box */
modal-content {
border: 1px solid #888;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
popup-overlay {
/*Hides pop-up when there is no "active" class*/
visibility: hidden;
position: absolute;
background: #ffffff;
border: 3px solid #666666;
width: 50%;
height: 50%;
left: 25%;
}
popup-overlay.active {
/*displays pop-up when "active" class is present*/
visibility: visible;
text-align: center;
}
popup-content {
/*Hides pop-up content when there is no "active" class */
visibility: hidden;
}
popup-content.active {
/*Shows pop-up content when "active" class is present */
visibility: visible;
}
<!-- ~~~~~ JQUERY CDN - JQUERY WON'T WORK WITHOUT THIS ~~~~~ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="login-overlay active"> <!-- ~~~~~ ADDED ACTIVE CLASS ~~~~~ -->
<!-- Trigger the modal with a button -->
<!-- NOTHING !!! -->
<!-- the window is always shown when the page is opened -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="login-overlay--content">
<div class="modal-header">
<button type="button" class="close btn btn-default" data-dismiss="modal">×</button>
<h3 class="modal-title">Willkommen auf dein-3d.com!!!</h3>
<br>
<p>Melde dich an, oder erstelle ein neues Konto, damit du:</p>
</div>
<div class="modal-body">
<ul class="list">
<li>
<i class="icon icon-checkmark-green"></i>
<span>Aktiv an der Community teilnehmen kannst</span>
</li>
<li>
<i class="icon icon-checkmark-green"></i>
<span>Produkte auf dem Marktplatz erwerben kannst</span>
</li>
<li>
<i class="icon icon-checkmark-green"></i>
<span>Für dich interessante Angebote siehst</span>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"><a href="/wp-login.php">Einloggen</button>
<button type="button" class="btn btn-default"><a href="/wp-login.php?action=register">Registrieren</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
