<script language="javascript">
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'>"+
" <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";
}
</script>
<!---------------------------------------------------------------->
<script>
function clk_yes(){
alert("你也同意了我的观点");
}
function clk_no(){
alert("不是你眼花了就是我眼花了！");
}
</script>
<body>
<button onClick="alert('我觉得今天天气真的很不错！')">test</button>
<button onClick="confirm('今天天气真的很好啊，难道不是么？','clk_yes','clk_no','就算是吧','乱讲')">询问框测试</button>
</body>
分享到：
相关推荐
"lhgdialog"是一个JavaScript库，专为创建各种类型的弹出层效果而设计，其中包括带或不带遮罩层的窗口，以及具有返回值功能、定位弹出窗口和随滚动条滚动等功能。下面我们将详细探讨这些知识点。 1. 弹出层（Pop-up...
本文将深入探讨标题所提及的"jQuery弹出层插件三种简单遮罩弹出框效果"，以及如何利用jQuery实现这些效果。 首先，让我们了解什么是弹出层和遮罩弹出框。弹出层（Popup Layer）是一种常见的网页交互设计，当用户...
总的来说，"Jquery简单的弹出层带遮罩插件"是一个实用的网页交互工具，通过jQuery的力量，实现了高效且易于使用的弹出层和遮罩效果，提升了用户的网页体验。在网页设计和开发中，这样的插件能大大简化工作流程，让...
本文将深入探讨“简单实用的jQuery可拖动弹出层，遮罩层”这一主题，旨在帮助开发者了解如何利用jQuery实现这种功能。 首先，我们来解析标题中的关键词“jQuery可拖动弹出层”。jQuery是一个广泛使用的JavaScript库...
《jQuery弹出层插件：实现简单遮罩弹出框效果》 在Web开发中，弹出层（Modal）是一种常见的交互元素，用于在用户与页面进行交互时提供额外的信息或者功能。jQuery作为一款强大的JavaScript库，提供了丰富的插件来...
在网页设计中，"div 弹出层遮罩 兼容各大浏览器" 是一个常见的交互效果，用于创建一种用户友好的界面体验。当用户点击某个按钮时，一个半透明的遮罩层会覆盖整个页面，突出显示弹出的窗口或信息，而其他部分则变得不...
利用div+css制作弹出层并遮罩层，主用用了两个div，一个div用于弹出框，另一个则遮罩整个页面
弹出层遮罩层效果(包括居中、不随滚动条滚动)
在本项目"Mvc5jQuery弹出层居中并显示遮罩"中，开发者利用Microsoft的ASP.NET MVC5框架和jQuery库，实现了弹出窗口的居中显示以及半透明遮罩效果，提升了用户界面的美观度和易用性。 首先，我们来了解一下MVC5框架...
3. **动画（Animation）**：遮罩层的弹出过程可能包含多个状态的变化，这就需要用到CSS3的关键帧动画（@keyframes）。定义动画的关键帧，可以控制元素在整个动画过程中的各个阶段的样式。 4. **盒模型**：理解CSS3...
遮罩弹出层 ; charset=utf-8" /> <title>jquery弹出层鼠标点击弹出层可浮动在屏幕滚动 弹出层当鼠标点击文字或图片弹出层，弹出层浮动在屏幕上可以随浏览器上下滚动，弹出层可自动居中在页面中间。jquery下载。" /> ...
在网页设计中，弹出层和遮罩层是常见的交互元素，用于提供用户与网站的进一步交互，如对话框、提示信息或者表单填写。本文将深入探讨如何自己编写这样的功能，主要关注“弹出层”和“遮罩层”的实现。 首先，我们...
在ASP.NET开发中，创建一个弹出层带遮罩层的效果是常见的需求，这通常用于显示模态对话框，如登录、确认操作或显示详细信息等。本篇将详细讲解如何实现这一功能，并以"divLogin"作为登录层，"doing"作为遮罩层为例...
"jQuery弹出登录遮罩层效果"是一个常见的交互设计技术，它允许用户在不影响主页面内容的情况下，通过一个半透明的遮罩层弹出登录窗口。这种方法既保证了用户体验，又确保了登录过程的安全性。下面将详细介绍如何实现...
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难，只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如：我想要这里是弹出浮动遮罩层</div> 并随页面...
本资源提供了一种简单易用的JS弹出遮罩层效果，能够满足大多数项目的需求。 以下是该效果的知识点解析： 1. HTML结构：该示例使用了基本的HTML结构，包括`<!DOCTYPE html>`、`<html>`、`<head>`、`<body>`等标签。...
这个效果使遮罩层淡入淡出，并使里面的内容带有一些3d旋转效果， 这里使用一些视觉差小把戏使遮罩层消失：我们为可见元素设置transition delay使透明度首先开始改变。 其他一些demo中我们使用了Snap.svg来制作SVG...
弹出层（遮罩层）弹出页面垂直居中，一个不错的例子，可拿来使用。
这通常包括两个部分：显示弹出框和遮罩层，以及关闭弹出框并移除遮罩层。当用户触发某个事件（如点击按钮）时，调用这些函数。 4. **事件处理**：确保在父页面中，如果有需要与子页面进行交互的事件，例如关闭弹出...
"jQuery遮罩效果的弹出层对话框.rar"是一个包含多种弹出层实现的资源包，主要目的是提供不同类型的提示和交互反馈，如提示层、确认框、alert对话框以及删除商品的确认提示。这些功能在网页应用中十分常见，可以提高...