confirm()d窗设置

confirm()d窗设置,第1张

confirm() 是询问 用户的意见,alert是d出信息提醒用户。confirm() 如果去掉了 确定 按钮 那他的 功能不是跟 alert 一样了吗,那干嘛不直接用 alert

自带的confirm无法对按钮文字进行修改,可以自定义一个层

<p>

<input onclick="msgbox('提示','请至少选择一项需要删除的记录!','',null,0,'Warning')" type="button" value="提示" /> 

<input onclick="msgbox('提示',' *** 作执行成功!','',null,0,'true')" type="button" value=" *** 作成功" /> 

<input onclick="msgbox('提示',' *** 作执行失败!','',null,0,'error')" type="button" value=" *** 作失败" /> 

<input onclick="msgbox('确认删除么?','点击确认执行删除 *** 作,点击取消不再执行 *** 作!','msgbox(\' *** 作提示\',\'删除成功!\',\'\',null,0,\'true\')',1,1,'Warning')" type="button" value="confirm" />

</p>

<script type="text/javascript" language="javascript">// <![CDATA[

function msgbox(title,content,func,cancel,focus,icon){

        /*        

        参数列表说明:

        title :d出对话框的标题,标题内容最好在25个字符内,否则会导致显示图片的异常                                                            

        text  :d出对话框的内容,可以使用HTML代码,例如<font color='red'>删除么?</font>,如果直接带入函数,注意转义

        func  :d出对话框点击确认后执行的函数,需要写全函数的引用,例如add(),如果直接带入函数,注意转义。

        cancel:d出对话框是否显示取消按钮,为空的话不显示,为1时显示

        focus :d出对话框焦点的位置,0焦点在确认按钮上,1在取消按钮上,为空时默认在确认按钮上

        icon  :d出对话框的图标

        Author:Jedliu

        Blog  :Jedliu.cublog.cn 

        【网页转载请保留版权信息,实际使用时可以除去该信息】

        */    

        icon="http://images.cnblogs.com/cnblogs_com/IT-Bear/365886/t_msgbox_"+icon+".png"

        create_mask()

        var temp="<div style=\"width:300pxborder: 2px solid #37B6D1background-color: #fff font-weight: boldfont-size: 12px\" >"

                +"<div style=\"line-height:25px padding:0px 5px    background-color: #37B6D1\">"+title+"</div>"

                +"<table  cellspacing=\"0\" border=\"0\"><tr><td style=\" padding:0px 0px 0px 20px \"><img src=\""+icon+"\" width=\"64\" height=\"64\"></td>"

                +"<td ><div style=\"background-color: #fff font-weight: boldfont-size: 12pxpadding:20px 0px  text-align:left\">"+content

                +"</div></td></tr></table>"

                +"<div style=\"text-align:center padding:0px 0px 20pxbackground-color: #fff\"><input type='button'  style=\"border:1px solid #CCC background-color:#CCC width:50px height:25px\" value='确定'id=\"msgconfirmb\"   onclick=\"remove()"+func+"\">"

        if(null!=cancel){temp+="   <input type='button' style=\"border:1px solid #CCC background-color:#CCC width:50px height:25px\" value='取消'  id=\"msgcancelb\"   onClick='remove()'>"}

        temp+="</div></div>"

        create_msgbox(400,200,temp)

        if(focus==0||focus=="0"||null==focus){document.getElementById("msgconfirmb").focus()}

        else if(focus==1||focus=="1"){document.getElementById("msgcancelb").focus()}            

    }

    function get_width(){

        return (document.body.clientWidth+document.body.scrollLeft)

    }

    function get_height(){

        return (document.body.clientHeight+document.body.scrollTop)

    }

    function get_left(w){

        var bw=document.body.clientWidth

        var bh=document.body.clientHeight

        w=parseFloat(w)

        return (bw/2-w/2+document.body.scrollLeft)

    }

    function get_top(h){

        var bw=document.body.clientWidth

        var bh=document.body.clientHeight

        h=parseFloat(h)

        return (bh/2-h/2+document.body.scrollTop)

    }

    function create_mask(){//创建遮罩层的函数

        var mask=document.createElement("div")

        mask.id="mask"

        mask.style.position="absolute"

        mask.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=4,opacity=25)"//IE的不透明设置

        mask.style.opacity=0.4//Mozilla的不透明设置

        mask.style.background="black"

        mask.style.top="0px"

        mask.style.left="0px"

        mask.style.width=get_width()

        mask.style.height=get_height()

        mask.style.zIndex=1000

        document.body.appendChild(mask)

    }

    function create_msgbox(w,h,t){//创建d出对话框的函数

        var box=document.createElement("div")    

        box.id="msgbox"

        box.style.position="absolute"

        box.style.width=w

        box.style.height=h

        box.style.overflow="visible"

        box.innerHTML=t

        box.style.zIndex=1001

        document.body.appendChild(box)

        re_pos()

    }

    function re_mask(){

        /*

        更改遮罩层的大小,确保在滚动以及窗口大小改变时还可以覆盖所有的内容

        */

        var mask=document.getElementById("mask")    

        if(null==mask)return

        mask.style.width=get_width()+"px"

        mask.style.height=get_height()+"px"

    }

    function re_pos(){

        /*

        更改d出对话框层的位置,确保在滚动以及窗口大小改变时一直保持在网页的最中间

        */

        var box=document.getElementById("msgbox")

        if(null!=box){

            var w=box.style.width

            var h=box.style.height

            box.style.left=get_left(w)+"px"

            box.style.top=get_top(h)+"px"

        }

    }

    function remove(){

        /*

        清除遮罩层以及d出的对话框

        */

        var mask=document.getElementById("mask")

        var msgbox=document.getElementById("msgbox")

        if(null==mask&&null==msgbox)return

        document.body.removeChild(mask)

        document.body.removeChild(msgbox)

    }

    

    function re_show(){

        /*

        重新显示遮罩层以及d出窗口元素

        */

        re_pos()

        re_mask()    

    }

    function load_func(){

        /*

        加载函数,覆盖window的onresize和onscroll函数

        */

        window.onresize=re_show

        window.onscroll=re_show    

    }

// ]]></script>

不可以给confirm对话框对话框的按钮添加事件,如果真想要这种效果,可以弄一个类似confirm效果的d窗来实现。jQuery官网里的UI封装的dialog事件,就是类似confirm的d窗,但是功能比较多,可以通过设置属性来设置:调节大小,是否有遮罩层,是否可移动……。

自己可以仿照做一个简单的,然后就可以在“确定”或“删除”按钮上添加事件了。。。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/7885144.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-11
下一篇 2023-04-11

发表评论

登录后才能评论

评论列表(0条)

保存