2

名前と電子メールフォームであるこの単純な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>
4

1 に答える 1

3

最も簡単な方法は、オーバーレイとして機能する透明な背景を使用して、高い z-index を使用して重ね合わせた div を作成することです。次に、オーバーレイの上に中央に配置され (より高い z インデックスを持つ)、美しくスタイルされたメッセージ (ポジティブまたはネガティブ) を含む別の div を作成できます。

アラートを表示するコードでは、オーバーレイ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";

閉じるボタンを提供することをお勧めします。

于 2013-05-08T10:39:08.233 に答える