從按鈕更改為頁面加載彈出窗口
[英]Change from button to on page load popup window
問題描述
我無法更改此彈出式窗體。 從按鈕單擊以在加載頁面上顯示此內容。 因此，當我在1秒或2秒后打開索引頁面時，會自動顯示彈出內容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - Signup Newsletter Popup with Pure CSS</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins');
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 9999;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
#popup1 {
font-family: poppins;
}
#popup1 .popup {
margin: 0px auto;
padding: 50px 20px;
background: #fff;
border-radius: 0px;
height: 260px;
width: 690px;
position: relative;
text-align: center;
top: 50% !important;
position: fixed !important;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: 0px;
left: 0;
}
#popup1 .popup h2 {
margin-top: 0;
color: #333;
}
#popup1 .popup .close {
position: absolute;
top: 0px;
right: 0px;
transition: all 200ms;
font-size: 30px;
font-weight: normal;
text-decoration: none;
text-align: center;
background: #333;
border-radius: 0;
cursor: pointer;
float: right;
padding: 0;
color: #fff;
margin-top: 0;
margin-right: 0;
height: 40px;
width: 40px;
line-height: 45px;
}
#popup1 .popup .close:hover {
color: #06D85F;
}
#popup1 .popup .content {
max-height: 30%;
overflow: auto;
}
#popup1 .newletter-title h2 {
font-size: 24px;
text-transform: uppercase;
color: #000;
font-weight: 700;
letter-spacing: 3px;
margin: 0 0 15px;
}
#popup1 .box-content label {
font-weight: 400;
max-width: 560px;
display: inline-block;
margin-bottom: 5px;
font-size: 14px;
line-height: 26px;
}
.newletter-popup {
background: #fff;
top: 50% !important;
position: fixed !important;
padding: 0;
text-align: center;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#popup1 #frm_subscribe #subscribe_pemail {
background: #EBEBEB none repeat scroll 0% 0%;
border: medium none;
height: 40px;
width: 65%;
margin: 20px 0;
padding-left: 15px;
}
#popup1 #frm_subscribe a {
cursor: pointer;
border: none;
background: #333;
padding: 3px 25px;
text-transform: uppercase;
font-size: 14px;
color: #fff;
font-weight: 600;
line-height: 34px;
display: inline-block;
border-radius: 0;
letter-spacing: 2px;
}
#popup1 .box-content .subscribe-bottom {
margin-top: 20px;
}
#popup1 .box-content .subscribe-bottom #newsletter_popup_dont_show_again {
display: inline-block;
margin: 0;
vertical-align: middle;
margin-top: -1px;
}
#popup1 .box-content .subscribe-bottom label {
margin: 0;
font-weight: 400;
max-width: 650px;
display: inline-block;
margin-bottom: 5px;
font-size: 12px;
}
</style>
</head>
<body translate="no">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>POPUP Pure css</title>
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<div id="popup1" class="overlay">
<div class="popup"> <a class="close" href="#">×</a>
<div id="dialog" class="window">
<div class="box">
<div class="newletter-title">
<h2>Sign up & get 10% off</h2>
</div>
<div class="box-content newleter-content">
<label>Subscribe to our newsletters now and stay up-to-date with new collections, the latest
lookbooks and exclusive offers.</label>
<div id="frm_subscribe">
<form name="subscribe" id="subscribe_popup">
<div>
<input type="text" value="" name="subscribe_pemail" id="subscribe_pemail">
<input type="hidden" value="" name="subscribe_pname" id="subscribe_pname">
<div id="notification"></div>
<a class="button" onclick="email_subscribepopup()"><span>Submit</span> </a>
</div>
</form>
<div class="subscribe-bottom">
<input type="checkbox" id="newsletter_popup_dont_show_again">
<label for="newsletter_popup_dont_show_again">Don't show this popup again</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="btn btn-primary skip"
href="#popup1"
style="padding:6px 15px; background:#333; color:#fff; text-decoration:none; font-family:poppins; border-radius:3px; margin:25% 40%; display:inline-block;">
OPEN POPUP
</a>
</body>
</html>
</body>
</html>
這段代碼可以正常工作，但是帶有顯示彈出內容按鈕。 我需要在頁面加載時顯示相同的內容。 而且我認為它是一些javascript代碼或jquery。 如果有人知道該怎么做，請寫信給我。
謝謝大家
2 個解決方案
解決方案1
1 2019-07-04 22:25:19
根據您的示例，您具有ID“ popup1”，對於本示例，我們可以僅添加ready函數並將href位置添加至ID。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - Signup Newsletter Popup with Pure CSS</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins');
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 9999;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
#popup1 {
font-family: poppins;
}
#popup1 .popup {
margin: 0px auto;
padding: 50px 20px;
background: #fff;
border-radius: 0px;
height: 260px;
width: 690px;
position: relative;
text-align: center;
top: 50% !important;
position: fixed !important;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: 0px;
left: 0;
}
#popup1 .popup h2 {
margin-top: 0;
color: #333;
}
#popup1 .popup .close {
position: absolute;
top: 0px;
right: 0px;
transition: all 200ms;
font-size: 30px;
font-weight: normal;
text-decoration: none;
text-align: center;
background: #333;
border-radius: 0;
cursor: pointer;
float: right;
padding: 0;
color: #fff;
margin-top: 0;
margin-right: 0;
height: 40px;
width: 40px;
line-height: 45px;
}
#popup1 .popup .close:hover {
color: #06D85F;
}
#popup1 .popup .content {
max-height: 30%;
overflow: auto;
}
#popup1 .newletter-title h2 {
font-size: 24px;
text-transform: uppercase;
color: #000;
font-weight: 700;
letter-spacing: 3px;
margin: 0 0 15px;
}
#popup1 .box-content label {
font-weight: 400;
max-width: 560px;
display: inline-block;
margin-bottom: 5px;
font-size: 14px;
line-height: 26px;
}
.newletter-popup {
background: #fff;
top: 50% !important;
position: fixed !important;
padding: 0;
text-align: center;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#popup1 #frm_subscribe #subscribe_pemail {
background: #EBEBEB none repeat scroll 0% 0%;
border: medium none;
height: 40px;
width: 65%;
margin: 20px 0;
padding-left: 15px;
}
#popup1 #frm_subscribe a {
cursor: pointer;
border: none;
background: #333;
padding: 3px 25px;
text-transform: uppercase;
font-size: 14px;
color: #fff;
font-weight: 600;
line-height: 34px;
display: inline-block;
border-radius: 0;
letter-spacing: 2px;
}
#popup1 .box-content .subscribe-bottom {
margin-top: 20px;
}
#popup1 .box-content .subscribe-bottom #newsletter_popup_dont_show_again {
display: inline-block;
margin: 0;
vertical-align: middle;
margin-top: -1px;
}
#popup1 .box-content .subscribe-bottom label {
margin: 0;
font-weight: 400;
max-width: 650px;
display: inline-block;
margin-bottom: 5px;
font-size: 12px;
}
</style>
</head>
<body translate="no">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>POPUP Pure css</title>
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<div id="popup1" class="overlay">
<div class="popup"> <a class="close" href="#">×</a>
<div id="dialog" class="window">
<div class="box">
<div class="newletter-title">
<h2>Sign up & get 10% off</h2>
</div>
<div class="box-content newleter-content">
<label>Subscribe to our newsletters now and stay up-to-date with new collections, the latest
lookbooks and exclusive offers.</label>
<div id="frm_subscribe">
<form name="subscribe" id="subscribe_popup">
<div>
<input type="text" value="" name="subscribe_pemail" id="subscribe_pemail">
<input type="hidden" value="" name="subscribe_pname" id="subscribe_pname">
<div id="notification"></div>
<a class="button" onclick="email_subscribepopup()"><span>Submit</span> </a>
</div>
</form>
<div class="subscribe-bottom">
<input type="checkbox" id="newsletter_popup_dont_show_again">
<label for="newsletter_popup_dont_show_again">Don't show this popup again</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="btn btn-primary skip"
href="#popup1"
id="foo"
style="padding:6px 15px; background:#333; color:#fff; text-decoration:none; font-family:poppins; border-radius:3px; margin:25% 40%; display:inline-block;">
OPEN POPUP
</a>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$('document').ready(function(){
window. location. href="#popup1";
})
</script>
</html>
</body>
</html>
解決方案2
0 2019-07-05 05:55:03
您可以使用setTimeout方法獲取輸出。 運行該代碼段，並等待5秒鍾以查看輸出。 您可以根據需要更改setTimeout值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CodePen - Signup Newsletter Popup with Pure CSS</title> <style> @import url('https://fonts.googleapis.com/css?family=Poppins'); .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; z-index: 9999; } .overlay:target { visibility: visible; opacity: 1; } #popup1 { font-family: poppins; } #popup1 .popup { margin: 0px auto; padding: 50px 20px; background: #fff; border-radius: 0px; height: 260px; width: 690px; position: relative; text-align: center; top: 50% !important; position: fixed !important; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 0px; left: 0; } #popup1 .popup h2 { margin-top: 0; color: #333; } #popup1 .popup .close { position: absolute; top: 0px; right: 0px; transition: all 200ms; font-size: 30px; font-weight: normal; text-decoration: none; text-align: center; background: #333; border-radius: 0; cursor: pointer; float: right; padding: 0; color: #fff; margin-top: 0; margin-right: 0; height: 40px; width: 40px; line-height: 45px; } #popup1 .popup .close:hover { color: #06D85F; } #popup1 .popup .content { max-height: 30%; overflow: auto; } #popup1 .newletter-title h2 { font-size: 24px; text-transform: uppercase; color: #000; font-weight: 700; letter-spacing: 3px; margin: 0 0 15px; } #popup1 .box-content label { font-weight: 400; max-width: 560px; display: inline-block; margin-bottom: 5px; font-size: 14px; line-height: 26px; } .newletter-popup { background: #fff; top: 50% !important; position: fixed !important; padding: 0; text-align: center; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #popup1 #frm_subscribe #subscribe_pemail { background: #EBEBEB none repeat scroll 0% 0%; border: medium none; height: 40px; width: 65%; margin: 20px 0; padding-left: 15px; } #popup1 #frm_subscribe a { cursor: pointer; border: none; background: #333; padding: 3px 25px; text-transform: uppercase; font-size: 14px; color: #fff; font-weight: 600; line-height: 34px; display: inline-block; border-radius: 0; letter-spacing: 2px; } #popup1 .box-content .subscribe-bottom { margin-top: 20px; } #popup1 .box-content .subscribe-bottom #newsletter_popup_dont_show_again { display: inline-block; margin: 0; vertical-align: middle; margin-top: -1px; } #popup1 .box-content .subscribe-bottom label { margin: 0; font-weight: 400; max-width: 650px; display: inline-block; margin-bottom: 5px; font-size: 12px; } </style> </head> <head translate="no"> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>POPUP Pure css</title> <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script> $(document).ready(function () { //$("#popup1").hide(); setTimeout(function () { console.log("came"); window.location.href = "#popup1"; }, 5000); }); </script> <div id="popup1" class="overlay"> <div class="popup"> <a class="close" href="#">×</a> <div id="dialog" class="window"> <div class="box"> <div class="newletter-title"> <h2>Sign up & get 10% off</h2> </div> <div class="box-content newleter-content"> <label>Subscribe to our newsletters now and stay up-to-date with new collections, the latest lookbooks and exclusive offers.</label> <div id="frm_subscribe"> <form name="subscribe" id="subscribe_popup"> <div> <input type="text" value="" name="subscribe_pemail" id="subscribe_pemail"> <input type="hidden" value="" name="subscribe_pname" id="subscribe_pname"> <div id="notification"></div> <a class="button" onclick="email_subscribepopup()"><span>Submit</span> </a> </div> </form> <div class="subscribe-bottom"> <input type="checkbox" id="newsletter_popup_dont_show_again"> <label for="newsletter_popup_dont_show_again">Don't show this popup again</label> </div> </div> </div> </div> </div> </div> </div> <p><a href="#popup1"></a></p> </head> </html> </html>
如何通過單擊彈出窗口中的按鈕將打開彈出窗口的窗口重定向到新頁面？
[英]How do I redirect the window that opened a popup window to a new page by clicking a button in the popup window?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.