js中用confirm("str")弹出的消息框怎么设置按钮的文本

JavaScript012

js中用confirm("str")弹出的消息框怎么设置按钮的文本,第1张

自带的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 :弹出对话框的标题,标题内容最好在25个字符内,否则会导致显示图片的异常                                                            

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

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

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

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

        icon  :弹出对话框的图标

        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){//创建弹出对话框的函数

        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(){

        /*

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

        */

        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(){

        /*

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

        */

        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(){

        /*

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

        */

        re_pos()

        re_mask()    

    }

    function load_func(){

        /*

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

        */

        window.onresize=re_show

        window.onscroll=re_show    

    }

// ]]></script>

JavaScript的版本指的是执行JavaScript的运行环境(JS引擎)所遵循的ECMAScript标准.

JavaScript是ECMAScript标准的一种实现,这个标准随着历史在不断演进.

最初的JS版本为1.0IE6时代典型的为3.1版本 IE9时代(最近几年)主流为5.1标准去年新版本6.0(准确名字是ES2015)标准发布,目前较新的浏览器都有部分支持下一个版本为7.0,预计明后年颁布.

不同版本增加扩展了不同的特性, 新版本向后兼容旧版本.所以有时候会出现某些代码在新浏览器中正常,旧浏览器中无法执行的问题.

1,reload 方法,该方法强迫浏览器刷新当前页面。

语法:location.reload([bForceGet])

参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新")

2,replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后退”来访问已经被替换的URL。

语法: location.replace(URL)

通常使用: location.reload() 或者是 history.go(0) 来做。

此方法类似客户端点F5刷新页面,所以页面method="post"时,会出现"网页过期"的提示。

因为Session的安全保护机制。

当调用 location.reload() 方法时, aspx页面此时在服务端内存里已经存在, 因此必定是 IsPostback 的。

如果有这种应用: 需要重新加载该页面,也就是说期望页面能够在服务端重新被创建,期望是 Not IsPostback 的。

这里,location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。

代码: location.replace(location.href)

返回并刷新页面:

location.replace(document.referrer)

document.referrer //前一个页面的URL

不要用 history.go(-1),或 history.back()来返回并刷新页面,这两种方法不会刷新页面。

附:

Javascript刷新页面的几种方法:

复制代码代码如下:

1,history.go(0)

2,location.reload()

3,location=location

4,location.assign(location)

5,document.execCommand('Refresh')

6,window.navigate(location)

7,location.replace(location)

8,document.URL=location.href

自动刷新页面的方法:

1,页面自动刷新:把如下代码加入<head>区域中

复制代码代码如下:

<meta http-equiv="refresh" content="20">

其中20指每隔20秒刷新一次页面.

2,页面自动跳转:把如下代码加入<head>区域中

复制代码代码如下:

<meta http-equiv="refresh" content="20url=http://www.jb51.net">

其中20指隔20秒后跳转到http://www.jb51.net页面

3,页面自动刷新js版

复制代码代码如下:

<script language="JavaScript">

function myrefresh()

{

window.location.reload()

}

setTimeout('myrefresh()',1000)//指定1秒刷新一次

</script>

4,JS刷新框架的脚本语句

复制代码代码如下:

//刷新包含该框架的页面用

<script language=JavaScript>

parent.location.reload()

</script>

//子窗口刷新父窗口

<script language=JavaScript>

self.opener.location.reload()

</script>

( 或 <a href="javascript:opener.location.reload()">刷新</a> )

//刷新另一个框架的页面用

<script language=JavaScript>

parent.另一FrameID.location.reload()

</script>

如果想关闭窗口时刷新或想开窗时刷新,在<body>中调用以下语句即可。

复制代码代码如下:

<body onload="opener.location.reload()">开窗时刷新

<body onUnload="opener.location.reload()">关闭时刷新

<script language="javascript">

window.opener.document.location.reload()

</script>

一、先来看一个简单的例子:

下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。

frame.html 由上(top.html)下(bottom.html)两个页面组成,代码如下:

复制代码代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>frame </TITLE>

</HEAD>

<frameset rows="50%,50%">

<frame name=top src="top.html">

<frame name=bottom src="bottom.html">

</frameset>

</HTML>

现在假设top.html (即上面的页面) 有七个button来实现对bottom.html (即下面的页面) 的刷新,可以用以下七种语句,哪个好用自己看着办了。

top.html 页面的代码如下:

复制代码代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>top.html </TITLE>

</HEAD>

<BODY>

<input type=button value="刷新1" onclick="window.parent.frames[1].location.reload()"><br>

<input type=button value="刷新2" onclick="window.parent.frames.bottom.location.reload()"><br>

<input type=button value="刷新3" onclick="window.parent.frames['bottom'].location.reload()"><br>

<input type=button value="刷新4" onclick="window.parent.frames.item(1).location.reload()"><br>

<input type=button value="刷新5" onclick="window.parent.frames.item('bottom').location.reload()"><br>

<input type=button value="刷新6" onclick="window.parent.bottom.location.reload()"><br>

<input type=button value="刷新7" onclick="window.parent['bottom'].location.reload()"><br>

</BODY>

</HTML>

下面是bottom.html页面源代码,为了证明下方页面的确被刷新了,在装载完页面弹出一个对话框。

复制代码代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>bottom.html </TITLE>

</HEAD>

<BODY onload="alert('我被加载了!')">

<h1>This is the content in bottom.html.</h1>

</BODY>

</HTML>

解释一下:

复制代码代码如下:

1.window指代的是当前页面,例如对于此例它指的是top.html页面。

2.parent指的是当前页面的父页面,也就是包含它的框架页面。例如对于此例它指的是framedemo.html。

3.frames是window对象,是一个数组。代表着该框架内所有子页面。

4.item是方法。返回数组里面的元素。

5.如果子页面也是个框架页面,里面还是其它的子页面,那么上面的有些方法可能不行。

附:

Javascript刷新页面的几种方法:

1 history.go(0)

2 location.reload()

3 location=location

4 location.assign(location)

5 document.execCommand('Refresh')

6 window.navigate(location)

7 location.replace(location)

8 document.URL=location.href