从条件 javascript 函数返回自定义对话框答案

【问题标题】：returning a custom dialog box from a conditional javascript function从条件 javascript 函数返回自定义对话框
【发布时间】：2016-09-18 13:02:51
【问题描述】：

这是我的 javascript 函数，用于检查上传的文件是否为图像格式类型之一！目前我已经使用默认的警报框来返回错误信息！

 var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
function Validate(oForm) {
    var arrInputs = oForm.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var oInput = arrInputs[i];
        if (oInput.type == "file") {
            var sFileName = oInput.value;
            if (sFileName.length > 0) {
                var blnValid = false;
                for (var j = 0; j < _validFileExtensions.length; j++) {
                    var sCurExtension = _validFileExtensions[j];
                    if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                        blnValid = true;
                        break;
                    }
                }

                if (!blnValid) {

                    alert("Sorry a dig copy may be in a different file format! Formats allowed are " + _validFileExtensions.join(", "));

                    return false;
                }
            }
        }
    }

    return true;
}

以下代码给出了一个我想调用的自定义对话框，而不是默认框

<style>
            #white-background{
                display: none;
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0px;
                left: 0px;
                background-color: #fefefe;
                opacity: 0.7;
                z-index: 9999;
            }

            #dlgbox{
                /*initially dialog box is hidden*/
                display: none;
                position: fixed;
                width: 480px;
                z-index: 9999;
                border-radius: 10px;
                background-color: #7c7d7e;

            }

            #dlg-header{
                background-color:aliceblue;
                color: white;
                font-size: 20px;
                padding: 10px;
                margin: 10px 10px 0px 10px;
            }

            #dlg-body{
                background-color: white;
                color: black;
                font-size: 14px;
                padding: 10px;
                margin: 0px 10px 0px 10px;
            }

            #dlg-footer{
                background-color: #f2f2f2;
                text-align: right;
                padding: 10px;
                margin: 0px 10px 10px 10px;
            }

            #dlg-footer button{
                background-color: grey;
                color: white;
                padding: 5px;
                border: 0px;
            }
        </style>
    </head>
    <body>
        <!-- dialog box -->
        <div id="white-background">
        </div>
        <div id="dlgbox">
            <div id="dlg-header"></div>
            <div id="dlg-body">Sorry a dig copy may be in a different file format! Formats allowed are ".jpg", ".jpeg", ".bmp", ".gif", ".png"</div>
            <div id="dlg-footer">
                <button onclick="dlgLogin()">Ok</button>
            </div>
        </div>

        <!-- rest of the page -->
        <h1>Dialog Box Demo</h1>
        <p>This is a dialog box example.</p>
        <p>Feel free to experiment with the code.</p>
        <p>Click the button below to see the dialog box.</p>
        <button onclick="showDialog()">Click Me!</button>

        <!-- script of dialog -->
        <script>
            function dlgLogin(){
                var whitebg = document.getElementById("white-background");
                var dlg = document.getElementById("dlgbox");
                whitebg.style.display = "none";
                dlg.style.display = "none";
            }

            function showDialog(){
                var whitebg = document.getElementById("white-background");
                var dlg = document.getElementById("dlgbox");
                whitebg.style.display = "block";
                dlg.style.display = "block";

                var winWidth = window.innerWidth;
                var winHeight = window.innerHeight;

                dlg.style.left = (winWidth/2) - 480/2 + "px";
                dlg.style.top = "150px";
            }
        </script>

请帮助我将第二个代码集成到第一个代码中，以便我可以返回自定义对话框而不是默认的警报框

【问题讨论】：

只需调用showDialog() 而不是alert()。

标签： javascript html dialog conditional customization

【解决方案1】：

你可以在这里找到你的答案how to change the style of alert box

The alert box is a system object, and not subject to CSS. To do this style of thing you would need to create an HTML element and mimic the alert() functionality. The jQuery UI Modal box does a lot of the work for you, working basically as I have described: Link.

【讨论】：