自定义确认窗口类似confirm

来源：互联网发布：上海口腔科排名知乎编辑：程序博客网时间：2024/05/29 19:01

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>测试dalog</title>
        <style type="text/css">
#gobalCoverDiv {
    position: absolute;
    display: none;
    background: green;
    left: 0px;
    top: 0px;
    text-align: center;
    filter: Alpha(Opacity = 20);
}

#confirmDiv {
    position: absolute;
    display: none;
    width: 500px;
    height: 200px;
    background: #FFFFFF;
    border: 3px inset;
    font-size: 14px;
    text-align: center;
}

.page4mg {
    margin: 4px;
}
</style>
        <script type="text/javascript">
        var confirmHTML = "您确认提交临时申请有效期至20081205";
        function showConfirm(confirmHTML,formsb){
        confirmValue.innerHTML = confirmHTML;
        gobalCoverDiv.style.width = screen.width;
        gobalCoverDiv.style.height = screen.height;
        gobalCoverDiv.style.display = "block";
        confirmDiv.style.left = screen.width/2 - 250;
        confirmDiv.style.top = 150 ;    confirmDiv.style.display = "block";
        confrimSubmit.onclick= function(){closeConfirm();formsb();};
        }
        function closeConfirm(){
        gobalCoverDiv.style.display = "none";
        confirmDiv.style.display = "none";
        }
        function formSub(){
        alert("ddd OK");   //confrimSubmit.detachEvent("onclick", formSub);
     }
</script>
    </head>
    <body>
        <form id="form1" name="form1">
            <input type="text" name="rmb" value="1000" />
            <select id="se" name="se">
                <option value="dd">
                    dd
                </option>
                <option value="aa">
                    aa
                </option>
                <option value="cc">
                    cc
                </option>
                <option value="bb">
                    bb
                </option>
            </select>
            <input type="button" value="提交"
                onclick="showConfirm(confirmHTML,formSub)" />
        </form>
        <div id="gobalCoverDiv">
            <iframe width="100%" height="100%"
                style="filter: Alpha(Opacity = 0);"></iframe>
        </div>
        <div id="confirmDiv" onkeyup="if (event.keyCode == 27)   closeConfirm();">
            <div
                style="width: 100%; background: #3A3555 repeat-x fixed; float: right; text-align: right">
                <div style="float:left"><font color="#ffffff">网页-对话框</font></div>
                <div style="float:right"><input type="button" value="X" style="height: 17px;" align="middle"
                    onclick="closeConfirm()";/>

         </div>

            </div>
            <div style="text-align: left; width: 40%">
                <p class="page4mg" id="confirmValue"></p>
                <p class="page4mg">
                    <input type="button" id="confrimSubmit" value="提交"
                        onclick="closeConfirm();">
                    <input type="button" value="返回" onclick="closeConfirm();">
                </p>
            </div>
        </div>
    </body>
</html>

自定义确认窗口 类似confirm

自定义确认窗口类似confirm