强文我有一个显示onpage load的弹出窗体...但我只使用了html和css ...
我希望能够添加一个cookie，使弹出窗口只显示一次onpage load我该怎么做？
另外，我如何在表单上加上延迟，以便它不会立即弹出。
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet" />
<link href="css/popupForm.css" rel="stylesheet" />
<style type="text/css">
#popup {
display: none;
}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
$(document).ready(function () {
var isfirst = localStorage.getItem('status');
if (isfirst == null) {
localStorage.setItem('status', 1);
// SHow popup here
$('#popup').show();
}
});
</script>
<div class="popup-wrapper" id="popup">
<div class="popup-container">
<!-- Popup Contents, just modify with your own -->
<form id="popupForm" class="form-style1" method="post" action="http://robust.flg360.co.uk/api/APIHTTPPost.php">
<div class="formLogo"></div>
<h2>Enquire Now for a Free Information Pack</h2>
<div class="columns six">
<p>
This form is simply here to speed up the process enter your details and one of our friendly & professional
course advisors will contact you within 1 working day.<br /><br />
<span style="font-weight:bold">We do not share your details, also we do not spam!</span>
<br /><br />
We hate PopUps as much as you do, but don't let this discourage you from taking a look at our website.<br />
</p>
</div>
<div class="columns five">
<input type="hidden" name="intLeadGroupID" value="46320" />
<input type="hidden" name="strSource" value="" />
<input type="hidden" name="strMedium" value="" />
<input type="hidden" name="strTerm" value="" />
<input type="hidden" name="intSiteID" value="15334" />
<input type="hidden" name="intReferrerBuyerID" value="0" />
<input type="hidden" name="strAPISuccessURL" value="" />
<input type="hidden" name="strAPIFailURL" value="" />
<input type="hidden" name="strAPISuccessURL" value="http://www.office-training-courses.co.uk/thankyou" />
<input type="hidden" name="strAPIFailURL" value="http://www.office-training-courses.co.uk/sorry" />
<input type="hidden" name="strLeadData2" value="Lead is from ECDL contact page" />
<div>
<input type="text" name="strLeadFirstName" id="strLeadFirstName" placeholder="First Name *" />
</div>
<div>
<input type="text" name="strLeadLastName" id="strLeadLastName" placeholder="Last Name *" />
</div>
<div>
<input type="text" name="strLeadPhone1" id="strLeadPhone1" placeholder="Phone *" />
</div>
<div>
<input type="email" name="strLeadEmail" id="strLeadEmail" placeholder="Email *" />
</div>
<textarea placeholder="Leave comment here..." id="strLeadData3" name="strLeadData3"></textarea>
<div>
<input type="submit" value="Submit!" class="formButton" />
</div>
</div>
</form>
<!-- Popup contents is until here--><a class="popup-close" href="#popup">X</a>
<div class="g-recaptcha" data-sitekey="6LfCQggTAAAAAFQLaPfR-RTrwXnaIetV1-hD6rMe"></div>
<!--<div class="formImg"></div>-->
</div>
</div>
答案 0 :(得分：2)
您可以使用浏览器localStorage进行此操作。就像：
首先检查页面加载
var isfirst= localStorage.getItem('status');
if(isfirst==null)
{
localStorage.setItem('status', 1);
// SHow popup here
}
完整HTML：
<!DOCTYPE html>
<!-- saved from url=(0020)http://bilmen.co.uk/ -->
<html lang="en" class="no-js"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="http://bilmen.co.uk/images/favicon.ico">
<meta charset="UTF-8">
<title>PopUp Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./PopUp Test_files/css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://bilmen.co.uk/css/reset.css"> <!-- CSS reset -->
<link href="http://bilmen.co.uk/css/skeleton.css" rel="stylesheet">
<link href="http://bilmen.co.uk/css/style.css" rel="stylesheet">
<link href="http://bilmen.co.uk/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="http://bilmen.co.uk/css/popupForm.css" rel="stylesheet">
<style type="text/css">
#popup{display:none;}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="./PopUp Test_files/cb=gapi.loaded_0" async=""></script><script type="text/javascript" async="" src="./PopUp Test_files/recaptcha__en_gb.js"></script><script src="./PopUp Test_files/api.js"></script>
<script>
$(document).ready(function() {
var isfirst = localStorage.getItem('status');
if (isfirst == null) {
localStorage.setItem('status', 1);
// SHow popup here
$('#popup').show();
}
});
</script>
<script type="text/javascript" charset="UTF-8" src="./PopUp Test_files/api(1).js" gapi_processed="true"></script></head>
<body>
<div class="popup-wrapper" id="popup">
<div class="popup-container">
<!-- Popup Contents, just modify with your own -->
<form id="alreadyVisited" class="form-style1" method="post" action="http://robust.flg360.co.uk/api/APIHTTPPost.php">
<div class="formLogo"></div>
<h2>Enquire Now for a Free Information Pack</h2>
<div class="columns six">
<p>
This form is simply here to speed up the process enter your details and one of our friendly & professional
course advisors will contact you within 1 working day.<br><br>
<span style="font-weight:bold">We do not share your details, also we do not spam!</span>
<br><br>
We hate PopUps as much as you do, but don't let this discourage you from taking a look at our website.<br>
</p>
</div>
<div class="columns five">
<input type="hidden" name="intLeadGroupID" value="46320">
<input type="hidden" name="strSource" value="">
<input type="hidden" name="strMedium" value="">
<input type="hidden" name="strTerm" value="">
<input type="hidden" name="intSiteID" value="15334">
<input type="hidden" name="intReferrerBuyerID" value="0">
<input type="hidden" name="strAPISuccessURL" value="">
<input type="hidden" name="strAPIFailURL" value="">
<input type="hidden" name="strAPISuccessURL" value="http://www.office-training-courses.co.uk/thankyou">
<input type="hidden" name="strAPIFailURL" value="http://www.office-training-courses.co.uk/sorry">
<input type="hidden" name="strLeadData2" value="Lead is from ECDL contact page">
<div>
<input type="text" name="strLeadFirstName" id="strLeadFirstName" placeholder="First Name *">
</div>
<div>
<input type="text" name="strLeadLastName" id="strLeadLastName" placeholder="Last Name *">
</div>
<div>
<input type="text" name="strLeadPhone1" id="strLeadPhone1" placeholder="Phone *">
</div>
<div>
<input type="email" name="strLeadEmail" id="strLeadEmail" placeholder="Email *">
</div>
<textarea placeholder="Leave comment here..." id="strLeadData3" name="strLeadData3"></textarea>
<div>
<input type="submit" value="Submit!" class="formButton">
</div>
</div>
</form>
<!-- Popup contents is until here--><a class="popup-close" href="http://bilmen.co.uk/#popup">X</a>
<div class="g-recaptcha" data-sitekey="6LfCQggTAAAAAFQLaPfR-RTrwXnaIetV1-hD6rMe"><div><div style="width: 304px; height: 78px;"><iframe frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="" tabindex="0" vspace="0" width="304" title="recaptcha widget" role="presentation" height="78" id="I0_1434107014820" name="I0_1434107014820" src="./PopUp Test_files/anchor.html"></iframe></div><textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none; display: none; "></textarea></div></div>
<!--<div class="formImg"></div>-->
</div>
</div>
</body></html>
答案 1 :(得分：0)
使用此：
window.onload = openForm;
function openForm(){
if(localStorage.getItem("alreadyVisited")){
return;
}else{
localStorage.setItem("alreadyVisited",true);
//open Pop-up
}
}