Javascript覆蓋而不是提醒

Question

我有這個簡單的JavaScript代碼，這是一個名稱和電子郵件的形式。你可以看到最後有一個'感謝你註冊'提醒信息。 我想替換一個不錯的覆蓋頁面來說'謝謝你註冊'，而不是在警告框中使用相同的消息... 任何人有想法？ 我試圖與windows.location但它不會工作:(

<script language="Javascript">function emailCheck(emailStr) { 
      var emailPat = /^(.+)@(.+)$/; 
      var specialChars = "\\(\\)<>@,;:\\\\\\\"\\.\\[\\]"; 
      var validChars = "\[^\\s" + specialChars + "\]"; 
      var quotedUser = "(\"[^\"]*\")"; 
      var ipDomainPat = /^\[(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\]$/; 
      var atom = validChars + '+'; 
      var word = "(" + atom + "|" + quotedUser + ")"; 
      var userPat = new RegExp("^" + word + "(\\." + word + ")*$"); 
      var domainPat = new RegExp("^" + atom + "(\\." + atom + ")*$"); 
      var matchArray = emailStr.match(emailPat); 
      if (matchArray == null) { 
       alert("Email address seems incorrect (check @ and .'s)"); 
       return false; 
      } 
      var user = matchArray[1]; 
      var domain = matchArray[2]; 
      if (user.match(userPat) == null) { 
       alert("The username doesn't seem to be valid."); 
       return false; 
      } 
      var IPArray = domain.match(ipDomainPat); 
      if (IPArray != null) { 
       for (var i = 1; i <= 4; i++) { 
        if (IPArray[i] > 255) { 
         alert("Destination IP address is invalid!"); 
         return false; 
        } 
       } 
       return true; 
      } 
      var domainArray = domain.match(domainPat); 
      if (domainArray == null) { 
       alert("The domain name doesn't seem to be valid."); 
       return false; 
      } 
      var atomPat = new RegExp(atom, "g"); 
      var domArr = domain.match(atomPat); 
      var len = domArr.length; 
      if ((domArr[domArr.length - 1] != "info") && 
        (domArr[domArr.length - 1] != "name") && 
        (domArr[domArr.length - 1] != "arpa") && 
        (domArr[domArr.length - 1] != "coop") && 
        (domArr[domArr.length - 1] != "aero")) { 
       if (domArr[domArr.length - 1].length < 2 || 
         domArr[domArr.length - 1].length > 3) { 
        alert("The address must end in a three-letter domain, or two letter country."); 
        return false; 
       } 
      } 
      if (len < 2) { 
       var errStr = "This address is missing a hostname!"; 
       alert(errStr); 
       return false; 
      } 
      return true; 
     } 
     function UPTvalidateform(thisform) 
     { 
      if (thisform.val_1.value == "") { 
       alert("Please enter a value for Name"); 
       return(true); 
      } 
      if (emailCheck(thisform.email.value)) 
      { 

       if ((document.getElementById('unsubscribe') 
         && document.getElementById('unsubscribe').checked) && (document.getElementById('showpopup') && document.getElementById('showpopup').value == "on")) { 
        alert('Thank you, now you are unsubscribed!'); 
       } 
       else if (((document.getElementById('unsubscribe') 
         && !document.getElementById('unsubscribe').checked) || (!document.getElementById('unsubscribe'))) && (document.getElementById('showpopup') && document.getElementById('showpopup').value == "on")) { 
        alert('Thank you for signing up!'); 
       } 
       return false; 
      } 
      else 
      { 
       return true; 
      } 
     } 
                       </script> 

Answer 1

最簡單的方法就是與AA高z-index的疊加DIV，用透明背景作爲覆蓋。然後，您可以具有被疊加（具有較高的z-index）上部中心另一個DIV和cointaining消息（正或性否定）精美樣式。

在你顯示警報代碼，可以替換的是，通過改變顯示的覆蓋 div以及消息 d IV。

CSS

#shim { 
opacity: .75; 
filter: alpha(opacity=75); 
-ms-filter: "alpha(opacity=75)"; 
-khtml-opacity: .75; 
-moz-opacity: .75; 
background: #B8B8B8; 
position: absolute; 
left: 0px; 
top: 0px; 
height: 100%; 
width: 100%; 
} 

#msgbx { 
position: absolute; 
left: 50%; 
top: 50%; 
height: 150px; 
width: 350px; 
margin-top: -75px; 
margin-left: -175px; 
background: #fff; 
border: 1px solid #ccc; 
box-shadow: 3px 3px 7px #777; 
-webkit-box-shadow: 3px 3px 7px #777; 
-moz-border-radius: 22px; 
-webkit-border-radius: 22px; 
} 

HTML

<div id="shim "></div> 
<div id="msgbx ">some message goes here</div> 

現在不是警告你可以只說

document.getElementById('shim').style.display=document.getElementById('msgbx').style.display ="block"; 

並隱藏

document.getElementById('shim').style.display=document.getElementById('msgbx').style.display ="none"; 

這將是一個好主意，提供一個關閉按鈕。