`
hugang357
  • 浏览: 188561 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

重写微软的alert和confirm

阅读更多
以下代码来自网上
步骤一:创建js文件SysMsgBox.js


// JScript 文件

var alternateFrame=null;//生成的iframe
var alternateWin=null;

window.alert=showAlert;
window.confirm=showConfirm;

/**//**
* 人机交互窗口,覆盖自带的
*/
function alternateWindow(){
this.win=null;//生成对话框的窗口对象
this.pBody=null;//生成的body容器对象
this.pBg=null;
this.type="alert";//默认的种类是alert
this.FocusWhere="OK";//焦点在哪个按钮上
}
/**//**
* 模仿的alert窗口
*/
function showAlert(info){
alternateWin=new alternateWindow();
var pBody = alternateWin.init();
alternateWin.initAlertBody(pBody,info);
alternateWin.type="alert";
}
  /**//**
* 模仿的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>")
alternateFrame.style.position="absolute";
document.body.appendChild(alternateFrame);
}else{
alternateFrame.style.visibility="visible";
}
alternateFrame.style.width=screen.availWidth;
alternateFrame.style.height=screen.availHeight;
alternateFrame.style.left=document.body.scrollLeft;
alternateFrame.style.top=document.body.scrollTop;
alternateFrame.name=alternateFrame.uniqueID;

this.win=window.frames[alternateFrame.name];
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=this.win.document.body.children[1];
this.pBg=this.win.document.body.children[0];
this.hideAllSelect();
this.initBg();

return this.pBody;
}

/**//**
* 作用:初始化背景层
  */
alternateWindow.prototype.initBg=function(){
with(this.pBg.style){
position="absolute";
left="0";
top="0";
width="100%";
height="100%";
visibility="hidden";
backgroundColor="#333333";
filter="blendTrans(duration=1) alpha(opacity=30)";
}
this.pBg.filters.blendTrans.apply();
this.pBg.style.visibility="visible";
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/3;
var str;
str ="<table border=0 cellpadding=0 cellspacing=1 bgcolor=#000000 width=100% height=100%><tr height=30>";
str+="<td align=left style='color:#000000;font-size:14px;font-weight:bold' bgcolor=#9999ff>[提示]</td></tr>";
str+="<tr><td align=center bgcolor=#efefff style='font-size:12px;color:#000000;vertical-align: middle;'>";
str+=info+"</td></tr><tr height=30 bgcolor=#efefef><td align=center>" +
     "<input type='button' value='确定' id='OK'" +
     " onkeydown='parent.alternateWin.onKeyDown(event,this)'"+
     " onclick='parent.alternateWin.closeWin()' style='border:solid 1px #666666;background:#cccccc'>" +
     "</td></tr></table>";
obj.innerHTML=str;
this.win.document.body.all.OK.focus();
this.FocusWhere="OK";
}

alternateWindow.prototype.onKeyDown=function(event,obj){
  switch(event.keyCode){
  case 9:
   event.keyCode=-1;
  if(this.type=="confirm"){
  if(this.FocusWhere=="OK"){
  this.win.document.body.all.NO.focus();
  this.FocusWhere="NO";
  }else{
  this.win.document.body.all.OK.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=#000000 width=100% height=100%><tr height=30>";
str+="<td align=left style='color:#000000;font-size:14px;font-weight:bold' bgcolor=#9999ff>[询问]</td></tr>";
str+="<tr><td align=center bgcolor=#efefff style='font-size:12px;color:#000000;vertical-align: middle;'>";
str+=info+"</td></tr><tr height=30 bgcolor=#efefef><td align=center>" +
"<input type='button' id='OK'" +
" onkeydown='parent.alternateWin.onKeyDown(event,this)'"+
" onclick='parent.alternateWin.closeWin();parent."+ok_func+"();' " +
" value='"+ok_str+"' style='border:solid 1px #666666;background:#cccccc'>"+
"&nbsp;&nbsp;&nbsp;<input type='button' value='"+notok_str+"' id='NO'"+
" onkeydown='parent.alternateWin.onKeyDown(event,this)'"+
" onclick='parent.alternateWin.closeWin();" +
" parent."+notok_func+"();' style='border:solid 1px #666666;background:#cccccc'></td></tr></table>";
obj.innerHTML=str;
this.win.document.body.all.OK.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";
}步骤二:在程序页面上引用该脚本,直接使用alert和confirm函数。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>

    <script language="javascript" src="SysMsgBox.js"></script>

    <script language="javascript" type="text/javascript">
      function f_yes()
      {
          alert('提交成功');
      }
     
      function f_no()
      {
          return ;
      }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <button onclick="confirm('确认提交?','f_yes','f_no','是','否')">
                提示</button>
            <button onclick="alert('hello!')">
                hello!</button>
        </div>
    </form>
</body>
</html>
分享到:
评论

相关推荐

    js重写alert和confirm

    重写alert和confirm示例 &lt;script src="demo.js"&gt;&lt;/script&gt; &lt;button onclick="alert('这是自定义的alert!')"&gt;显示警报 &lt;button onclick="var result = confirm('您确定要继续吗?'); console.log(result)"&gt;确认...

    重写alert,confirm 提示框样式

    重写alert,confirm 提示框样式

    alert和confirm弹出框样式美化

    在网页开发中,`alert`和`confirm`是JavaScript内置的两种用于与用户交互的对话框,它们分别用于显示警告信息和获取用户确认操作。然而,这两种弹出框的默认样式通常较为简单,无法满足现代网页设计的美观需求。本...

    自定义样式弹框alert和confirm

    在JavaScript编程中,`alert`和`confirm`是两种常见的内置弹框,用于向用户显示信息或获取用户确认。然而,这些内置弹框的样式和功能相对固定,不能满足所有设计需求。为了提供更个性化的用户体验,开发者经常需要...

    利用SweetAlert2取代浏览器的Alert和Confirm提示框

    利用SweetAlert2取代浏览器的Alert和Confirm提示框,带demo源码。

    Jquery自定义alert_confirm

    通常,浏览器原生的alert和confirm函数样式单一,无法满足个性化需求,而通过jQuery自定义,我们可以实现更加美观和功能丰富的对话框。 首先,`index.html`是项目的主要入口文件,它包含了HTML结构。在`&lt;head&gt;`部分...

    alert和confirm弹出框样式美化.zip

    标题“alert和confirm弹出框样式美化.zip”提示我们这个压缩包包含的是关于如何自定义和美化`alert`和`confirm`弹出框的内容,使它们更加符合网页的整体设计风格。 描述中提到,这个资源可以让我们自定义弹出框的...

    alert及confirm弹出框样式,换不错

    在网页开发中,`alert` 和 `confirm` 是两种常见的JavaScript内置函数,用于与用户进行交互。`alert` 用于显示一个警告对话框,通常包含一条消息和一个确定按钮;而`confirm` 则会展示一个确认对话框,包含一条消息...

    alert和confirm弹出框样式美化2

    "alert和confirm弹出框样式美化2"的主题就是如何通过CSS和JavaScript来定制这两个对话框的外观,提升用户体验。 `alert` 对话框主要用于通知用户,展示一条重要的信息,并且只有一个“确定”按钮。`confirm` 对话框...

    (alert/confirm/prompt)javaScript实现

    在JavaScript编程中,`alert`、`confirm`和`prompt`是三种常见的用户交互方法,它们用于在浏览器环境中向用户显示信息、获取用户输入或进行确认操作。下面将详细介绍这三种函数及其自定义实现。 `alert`函数是...

    重写javascript中window.confirm的行为

    另外,confirm对话框的按钮都是固定在”确定”和”取消”这两个。可能有些时候也不是很直观。 所以,可以考虑用vbscript中的msgbox来改写这个行为。下面是一个范例 代码如下: &lt;&#37;@ Page Language=”C#” ...

    JQuery插件:alert、confirm、prompt对话框插件

    而我们今天要讨论的是基于jQuery的插件,这些插件提供了更丰富的对话框功能,如alert、confirm和prompt,它们是原生JavaScript中的基本提示功能的增强版。 通常,原生的JavaScript alert()函数用于显示简单的警告...

    一款alert,confirm美化插件(内含使用教程)

    这是一个美化版的alert和confirm弹出框插件,适用于IE7+、chrome、Edge、fireFox、Safari等绝大多数浏览器。 功能可自己拓展,这里只是一个基础版本的插件 ,能够取代系统自带的alert和confirm。

    alert和confirm和ng-repeat

    在本话题中,我们将深入探讨如何结合Bootstrap的`alert`和`confirm`功能,以及如何在其中使用`ng-repeat`进行双层嵌套。 首先,Bootstrap是Twitter开发的一个开源CSS框架,提供了丰富的组件和样式,如模态框、警告...

    alert和confirm的bootstrap实现

    本文将详细讨论如何使用Bootstrap来实现自定义的alert和confirm功能。 首先,`alert`对话框通常用于向用户显示信息或警告,而`confirm`对话框则会询问用户是否确认执行某个操作,通常返回一个布尔值(true或false)...

    超漂亮的弹出框,alert,confirm,AJAX弹出层有一套自己的统一风格

    "超漂亮的弹出框,alert,confirm,AJAX弹出层有一套自己的统一风格"这一标题和描述所体现的是网页中的一种常见交互元素——弹出框的优化设计。这种设计不仅注重功能实用性,更强调视觉效果和整体风格的一致性,为用户...

    在Android的webview中定制js的alert,confirm和prompt对话框的方法

    在 Android 的 WebView 中定制 JS 的 Alert、Confirm 和 Prompt 对话框的方法 在 Android 中,使用 WebView 来加载网页时,会遇到 JavaScript 的 Alert、Confirm 和 Prompt 对话框的问题。这些对话框是浏览器默认的...

    jQuery弹窗(alert,confirm)美化插件.zip

    jQuery弹窗(alert,confirm)美化插件,弹窗的一些样式,这个是很常用的,比如我们开发后台程序,往数据库添加内容,是否成功,这时候可以用这样的弹窗,php中文网推荐下载!

    JQuery Alert 弹出框美化(Alert, Confirm, & Prompt Replacements)

    而"JQuery Alert 弹出框美化(Alert, Confirm, & Prompt Replacements)"是针对浏览器原生的alert、confirm和prompt对话框的一种美化和功能增强方案,旨在提升用户体验并提供更丰富的交互。 原生的JavaScript alert、...

Global site tag (gtag.js) - Google Analytics