2016-05-16 76 views
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似乎認爲它做的都是正確的。如果你想看看實際的模型,它在####。

+0

這將是更容易閱讀的代碼,如果您刪除的意見和固定的縮進。從第二個片段中刪除'

相關問題