您好,欢迎来到12图资源库!分享精神,快乐你我!我们只是素材的搬运工!!
  • 首 页
  • 当前位置:首页 > 网站教程 > AJAX教程 >
    js模拟confirm功能
    时间:2016-07-14 20:56 来源: 作者: 浏览:收藏 挑错 推荐 打印
       整天对着灰色的confirm和alert对话框,厌恶了,今天要彻底地改变一下这两个对话框,且功能照旧。    这里是使用js来实现这个效果
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>js模拟confirm和alert功能</title>
        <script>
        /*
        ************************************
        功能:js模拟confirm、alert效果,改变
        它们原始那些灰色的样子
        来源:网络
        整理:www.aspprogram.cn
        ************************************
        */
        function clk_yes()
        {
        alert("这是confirm效果");
        }
        function clk_no()
        {
        alert("这不是confirm效果");
        }
        var alternateFrame=null;//生成的iframe
        var alternateWin=null;
        window.alert=showAlert;
        window.confirm=showConfirm;
        var IsIE=document.all;
        function alternateWindow(){
        this.win=null;//生成对话框的窗口对象
        this.pBody=null;//生成的body容器对象
        this.pBg=null;
        this.type="alert";//默认的种类是alert
        this.FocusWhere="OK";//焦点在哪个按钮上
        }
        function showAlert(info){
        alternateWin=new alternateWindow();
        var pBody = alternateWin.init();
        alternateWin.initAlertBody(pBody,info);
        alternateWin.type="alert";
        }
        function showConfirm(info,ok_func,notok_func,ok_str,not_okstr){
        alternateWin=new alternateWindow();
        var pBody = alternateWin.init();
        alternateWin.initConfirmBody(pBody,info,ok_func,notok_func,ok_str,not_okstr);
        alternateWin.type="confirm";
        }
        alternateWindow.prototype.init=function() {
        if(alternateFrame==null){
        /*alternateFrame=document.createElement("<iframe allowTransparency='true' id='popframe' "
        +"frameborder=0 marginheight=0 src='about:blank' marginwidth=0 hspace=0 vspace=0 scrolling=no></iframe>")*/
        //上面的ff不能兼容
        alternateFrame=document.createElement("iframe");
        //alternateFrame.allowTransparency='true';//这个没有什么用啊……
        alternateFrame.id='popframe';
        alternateFrame.frameborder=0;
        alternateFrame.marginheight=0;
        alternateFrame.vspace=0;
        alternateFrame.hspace=0;
        alternateFrame.scrolling="no";
        alternateFrame.src='about:blank';
        alternateFrame.style.position="absolute";
        document.body.appendChild(alternateFrame);
        }else{
        alternateFrame.style.visibility="visible";
        }
        //ff设置位置时要把单位加上
        alternateFrame.style.width=screen.availWidth+"px";
        alternateFrame.style.height=screen.availHeight+"px";
        alternateFrame.style.left=document.body.scrollLeft+"px";
        alternateFrame.style.top=document.body.scrollTop+"px";
        //alternateFrame.name=alternateFrame.uniqueID;//ff下iframe不支持uniqueID属性
        alternateFrame.name="popframe";
        //this.win=window.frames[alternateFrame.name];//=========
        this.win=IsIE?window.frames[alternateFrame.name]:document.getElementById("popframe")。contentWindow;
        this.win.document.write("<body leftmargin=0 topmargin=0 oncontextmenu='self.event.returnValue=false'><div id=popbg></div><div id=popbody></div><div></div></body>");
        this.win.document.body.style.backgroundColor="transparent";
        document.body.style.overflow="hidden";
        //=============下面两句
        this.pBody=IsIE?this.win.document.body.children[1]:this.win.document.getElementById("popbody");
        this.pBg=IsIE?this.win.document.body.children[0]:this.win.document.getElementById("popbg");
        this.hideAllSelect();
        this.initBg();
        return this.pBody;
        }
        /**
        * 作用:初始化背景层
        */
        //=============ff的滤镜播放效果的支持知道怎么搞
        alternateWindow.prototype.initBg=function(){
        with(this.pBg.style){
        position="absolute";
        left="0";
        top="0";
        width="100%";
        height="100%";
        visibility="hidden";
        backgroundColor="#000000";
        if(IsIE)
        filter="blendTrans(duration=1) alpha(opacity=30)";//==========
        else//ff下的blendTrans滤镜好象不支持,反正是不知道了
        opacity="0.3";//透明度这样设置,是ff时
        }
        if(IsIE) this.pBg.filters.blendTrans.apply();
        this.pBg.style.visibility="visible";
        if(IsIE) this.pBg.filters.blendTrans.play();
        }
        /**
        * 作用:初始化显示层
        */
        alternateWindow.prototype.initAlertBody=function(obj,info){
        with(obj.style){
        position="absolute";
        width="400";
        height="150";
        backgroundColor="#ffffff";
        }
        obj.style.left=window.document.body.clientWidth/2-200;
        obj.style.top=window.document.body.clientHeight/10;
        var str;
        str ="<table border=0 cellpadding=0 cellspacing=1 bgcolor=#00ff00 width=100% height=100%><tr height=30>";
        str+="<td align=left style='color:#e1dfdf;font-size:14px;font-weight:bold' bgcolor=#119035>【新闻详细】<span id=newstitle></span></td></tr>";
        str+="<tr><td align=center bgcolor=#81FB8D style='font-size:12px;color:#454545;vertical-align: top;padding-top:5px;'>";
        str+=info+"</td></tr><tr height=40 bgcolor=#81FB8D><td align=center>" +
        "<input type='button' value='关 闭' id='AlertOK'" +//这里id要注意唯一
        " onkeydown='parent.alternateWin.onKeyDown(event,this)'"+
        " onclick='parent.alternateWin.closeWin()' style='border:solid 1px #797979;background:#f8f8f8;width:80px; padding:3px;'>" +
        "</td></tr></table>";
        obj.innerHTML=str;
        //这句话有问题,ff不支持all
        if(IsIE)this.win.document.body.all.AlertOK.focus();else this.win.document.getElementById("AlertOK");
        this.FocusWhere="OK";
        }
        alternateWindow.prototype.onKeyDown=function(event,obj){
        switch(event.keyCode){
        case 9://tab键
        //这里事件对象属性和方法使用没加与区别
        if(IsIE) event.keyCode=-1;else event.preventDefault();
        if(this.type=="confirm"){
        if(this.FocusWhere=="OK"){
        if(IsIE)
        this.win.document.body.all.ConfirmNO.focus();
        else
        this.win.document.getElementById("ConfirmNo")。focus();
        this.FocusWhere="NO";
        }else{
        if(IsIE)this.win.document.body.all.ConfirmOK.focus();else this.win.document.getElementById("ConfirmOK")。focus();
        this.FocusWhere="OK";
        }
        }
        break;
        case 13:obj.click();break;
        case 27:this.closeWin();break;
        }
        }
        /**
        * 作用:初始化显示层 conFirm提示层
        */
        alternateWindow.prototype.initConfirmBody=function(obj,info,ok_func,notok_func,ok_str,notok_str){
        with(obj.style){
        position="absolute";
        width="400";
        height="150";
        backgroundColor="#ffffff";
        }
        if(ok_str==null){
        ok_str="确定";
        }
        if(notok_str==null){
        notok_str="取消"
        }
        obj.style.left=window.document.body.clientWidth/2-200;
        obj.style.top=window.document.body.clientHeight/3;
        var str;
        str="<table border=0 cellpadding=0 cellspacing=1 bgcolor=#81FB8D width=100% height=100%><tr height=30>";
        str+="<td align=left style='color:#000000;font-size:14px;font-weight:bold' bgcolor=#119035>[询问]</td></tr>";
        str+="<tr><td align=center bgcolor=#81FB8D style='font-size:12px;color:#000000;vertical-align: middle;'>";
        str+=info+"</td></tr><tr height=30 bgcolor=#81FB8D><td align=center>" +
        "<input type='button' id='ConfirmOK'" +//这里id要注意唯一
        " onkeydown='parent.alternateWin.onKeyDown(event,this)'"+
        " onclick='parent.alternateWin.closeWin();parent."+ok_func+"();' " +
        " value='"+ok_str+"' style='border:solid 1px #666666;background:#81FB8D'>"+
        "&nbsp;&nbsp;&nbsp;<input type='button' value='"+notok_str+"' id='ConfirmNO'"+//这里id要注意唯一
        " onkeydown='parent.alternateWin.onKeyDown(event,this)'"+
        " onclick='parent.alternateWin.closeWin();" +
        " parent."+notok_func+"();' style='border:solid 1px #666666;background:#81FB8D'></td></tr></table>";
        obj.innerHTML=str;
        if(IsIE)this.win.document.body.all.ConfirmOK.focus();else this.win.document.getElementById("ConfirmOK")。focus();
        }
        /**
        * 作用:关闭一切
        */
        alternateWindow.prototype.closeWin=function(){
        alternateFrame.style.visibility="hidden";
        this.showAllSelect();
        document.body.style.overflow="auto";
        }
        /**
        * 作用:隐藏所有的select
        */
        alternateWindow.prototype.hideAllSelect=function(){
        var obj;
        obj=document.getElementsByTagName("SELECT");
        var i;
        for(i=0;i<obj.length;i++)
        obj[i].style.visibility="hidden";
        }
        /**
        * 显示所有的select
        */
        alternateWindow.prototype.showAllSelect=function(){
        var obj;
        obj=document.getElementsByTagName("SELECT");
        var i;
        for(i=0;i<obj.length;i++)
        obj[i].style.visibility="visible";
        }
        </script>
        </head>
        <body>
        <h1>点击下面两个按纽进行测试</h1><br />
        <input name="" type="submit" value="confirm效果" onclick="return confirm('这是confirm效果吗?','clk_yes','clk_no','是的','不是');" />
        <input type="button" value="alert效果" onclick="return alert('alert效果');">
        </html>

    (责任编辑:12图资源库)