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

从条件javascript函数返回自定义对话框,javascript,html,dialog,conditional,customization,Javascript,Html,Dialog,Conditional,Customization,这是我的javascript函数,用于检查上传的文件是否为图像格式类型1!目前,我已使用默认警报框返回错误消息 var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"]; function Validate(oForm) { var arrInputs = oForm.getElementsByTagName("input"); for (var i = 0; i < arrInput

这是我的javascript函数,用于检查上传的文件是否为图像格式类型1!目前,我已使用默认警报框返回错误消息

 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;
}
var\u validFileExtensions=[“.jpg”、“.jpeg”、“.bmp”、“.gif”、“.png”];
函数验证(oForm){
var arrInputs=oForm.getElementsByTagName(“输入”);
对于(var i=0;i0){
var blnValid=false;
对于(变量j=0;j<_validFileExtensions.length;j++){
var sCurExtension=_validfleextensions[j];
if(sFileName.substr(sFileName.length-sCurExtension.length,sCurExtension.length).toLowerCase()==sCurExtension.toLowerCase()){
blnValid=true;
打破
}
}
如果(!blnValid){
警报(“对不起,挖掘副本可能采用不同的文件格式!允许的格式为”+_validFileExtensions.join(“,”));
返回false;
}
}
}
}
返回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>

#白色背景{
显示:无;
宽度:100%;
身高:100%;
位置:固定;
顶部:0px;
左:0px;
背景色:#fefe;
不透明度:0.7;
z指数:9999;
}
#dlgbox{
/*最初,对话框是隐藏的*/
显示:无;
位置:固定;
宽度:480px;
z指数:9999;
边界半径:10px;
背景色:#7c7d7e;
}
#dlg头{
背景色:aliceblue;
颜色:白色;
字体大小:20px;
填充:10px;
保证金:10px 10px 0px 10px;
}
#dlg体{
背景色:白色;
颜色:黑色;
字体大小:14px;
填充:10px;
保证金:0px 10px 0px 10px;
}
#dlg页脚{
背景色:#F2F2;
文本对齐:右对齐;
填充:10px;
保证金:0px 10px 10px 10px;
}
#dlg页脚按钮{
背景颜色:灰色;
颜色:白色;
填充物:5px;
边界:0px;
}
很抱歉,挖掘副本可能采用不同的文件格式!允许的格式有“.jpg”、“.jpeg”、“.bmp”、“.gif”、“.png”
好啊
对话框演示
这是一个对话框示例

请随意试用代码

单击下面的按钮以查看对话框

点击我! 函数dlgLogin(){ var whitebg=document.getElementById(“白色背景”); var dlg=document.getElementById(“dlgbox”); whitebg.style.display=“无”; dlg.style.display=“无”; } 函数showDialog(){ var whitebg=document.getElementById(“白色背景”); var dlg=document.getElementById(“dlgbox”); whitebg.style.display=“block”; dlg.style.display=“块”; var winWidth=window.innerWidth; var winHeight=window.innerHeight; dlg.style.left=(winWidth/2)-480/2+“px”; dlg.style.top=“150px”; }

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

只需调用
showDialog()
而不是
alert()
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.