2
一般信息:我試圖創建一個彈出式模式窗口來驗證客戶郵政編碼 - 該網站僅適用於特定代碼範圍內的人,所以我只是需要它彈出,採取他們的意見,如果他們有資格購物,關閉,讓他們購物,並且至少在會議期間不再出現,並且如果他們沒有資格,則重定向他們到另一個網站。Javascript的某些部分在Chrome中不起作用,但在其他瀏覽器中完美工作
我已經在Firefox,Edge和IE中完美工作,但Chrome在運行大部分時很好,完全忽略了其他部分。這是我第一次嘗試用Javascript做任何事情,所以我希望這是一個簡單的答案。
另一個注意事項:對所有註釋過的行感到抱歉,我一直試圖密切注意自己曾經去過的地方,以便在需要時更輕鬆地撤消更改。
HTML:
<!--START: ZipCheckModal-->
<!-- Trigger/Open The Modal -->
<!--<button id="myBtn">Open Modal</button>-->
<!-- The Modal -->
<div id="zipModal" class="zipmodal">
<!-- Modal content -->
<div class="zipmodal-content">
<div class="zipmodal-header">
<span class="close">×</span>
<h2>Welcome to Nature's Warehouse Ohio!</h2>
</div>
<div class="zipmodal-body">
<div class="overblur">
<div class="zipcheckarea" id="zipcheckarea"><h1>Check your zip code</h1><br /><p>This site is for customers within our Ohio Local Delivery Zone. Check to see if you're eligible!</p><br />
<form class="zipbox">
<input type="number" id="custzip" placeholder="Your Zip" maxlength="5"/><br />
<input type="submit" id="zipbtn" value="Check Zip" onclick="checkZip()" /><br />
</form></div></div>
</div>
一些JavaScript代碼是內聯,上面的正下方(在某些時候我不能讓它在一個單獨的文件中運行,所以我剛剛離開它內聯)
// Get the modal
var zipmodal = document.getElementById('zipModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the window opens, open the modal
//Add "if there is no cookie" here
checkZipCookie();
//window.onload = function() {
// zipmodal.style.display = "block";
//}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
zipmodal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
//window.onclick = function(event) {
// if (event.target == zipmodal) {
// zipmodal.style.display = "none";
// }
//}
最後,單獨的Javascript文件:
function checkZip() {
var custzip = document.getElementById("custzip").value;
var ziparray = ["44606", "43803", "43804", "44608", "44610", "44611", "43805", "44612", "44613", "44617", "44618", "44622", "44624", "44627", "43824", "44628", "44633", "43828", "44636", "44637", "44638", "44647", "44654", "44659", "44660", "44661", "44662", "44666", "44667", "44676", "44677", "43840", "44680", "44681", "44687", "44689", "44690", "44691", "44697"];
if (ziparray.indexOf(custzip) > -1) {
document.getElementById("zipcheckarea").innerHTML = "You qualify for same-day delivery!\nIn a moment you will be redirected to the home page.";
document.getElementById("zipcheckarea").className = "delaymsg";
setTimeout(sendOH, 3000);
} else {
document.getElementById("zipcheckarea").innerHTML = "We're sorry, you don't qualify for same-day delivery.\nTry our regular website, where we offer FREE shipping on orders over $24.95!";
document.getElementById("zipcheckarea").className = "delaymsg";
setTimeout(sendNY, 4000);
}
}
function sendOH() {
setZipCookie("resident");
zipmodal.style.display = "none";
//window.location.href = "http://ohio.natureswarehouse.net";
}
function sendNY() {
window.location.href = "http://natureswarehouse.net";
}
function setZipCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getZipCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
}
}
return "";
}
function checkZipCookie() {
var isCookie = getZipCookie("resident");
if (isCookie != "") {
//Show nothing, free to browse
} else {
//Run the modal window
window.onload = function() {
zipmodal.style.display="block";
}
}
}
我看到的問題是:1)瀏覽器不遵守正確的關閉模式/重定向,它只是關閉模態窗口無論輸入什麼,2)忽略超時重定向之前,和3)不設置cookie,所以模態每次都會彈出。我在codepen中遇到了與它相同的問題(但僅在Chrome中),並且它在其他瀏覽器中似乎運行得非常完美。
我沒有在我的控制檯或任何東西中發現任何錯誤,Chrome似乎認爲它做的都是正確的。如果你想看看實際的模型,它在####。
這將是更容易閱讀的代碼,如果您刪除的意見和固定的縮進。從第二個片段中刪除'