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

最简单的方法是使用具有高 z-index 的叠加 div，并使用透明背景作为覆盖层。然后，您可以将另一个 div 置于覆盖层上方的中心(具有更高的 z-index)，并同时包含精美样式的消息(正面或负面)。

在显示警报的代码中，您可以通过更改 overlay div 和 message div 的 display 来替换它。

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";

提供关闭按钮是个好主意。