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）并且将信息（正面或负面）加上精美的样式。

在显示提醒的代码中，您可以通过更改叠加 div的显示以及消息 div来替换它。

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

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

Javascript覆盖而不是警报

1 个答案: