Question

一般信息：我试图创建一个弹出模式窗口来验证客户邮政编码 - 该网站仅适用于特定代码范围内的人，所以我只需要弹出它，接受他们的输入，如果他们有资格购物，关闭，让他们购物，至少在会话中不再出现，如果他们没有资格，可以将他们重定向到另一个网站。

我在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）Chrome没有关注正确的关闭模式/重定向，它只是关闭模态窗口，无论输入是什么，2）忽略重定向前的超时，并且3）没有设置cookie，所以每次都会弹出模态。我在codepen中遇到了同样的问题（但只在Chrome中），它似乎在其他浏览器中运行得很完美。

我的控制台或其他任何内容都没有出现任何错误，Chrome似乎认为它做的一切都是正确的。如果您想查看实际型号，请参阅####。

Answer 1

其他浏览器的行为与您怀疑的一样非常奇怪。

重定向的原因是表单提交，这是因为点击输入类型＆＃34;提交＆＃34;。

您可能希望阻止表单提交：

document.querySelector('form.zipbox').onsubmit = function (e) { e.preventDefault(); };

Javascript的某些部分无法在Chrome中运行，但在其他浏览器中运行良好

1 个答案: