`
willin2004
  • 浏览: 17090 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

用jQuery实现的模态弹出窗口，封装了alert和confirm

jQuery软件测试IE浏览器CSS 
阅读更多
闲来无事做了一个前台UI的dialog组件，测试了一下运行良好，能支持IE6、7、8和firefox2.0，其他没测。调用也非常简单配置好相应参数就可以了。

软件功能：
* 无限级弹出窗口
* Esc退出block弹出窗口
* 可拖动窗口
* 模态窗口
* 模态alert警告对话框
* 模态confirm对话框
* 页面局部模态
* 绑定按钮响应函数
* 弹出窗口加载iframe
* 自定义背景样式

组件提供了六个函数：
$.funkyUI   // 弹出模态窗口
$.unfunkyUI // 关闭模态窗口

$.alert //警告提示对话框
$.confirm //确认和取消对话框

$.fn.block  //块模态
$.fn.unblock//解除块模态

调用示例：
$.blockUI({
url:"1.html",//弹出窗口显示的内容，使用iframe
OKEvent:okEvent,//okEvent是自定义的确定按钮响应函数，
css:{width:"700",height:"500"}
});
$.alert("这是警告窗口");
$.confirm("这是个Boolean窗口");

$('#blocked').block();//id为blocked的元素设置为只读
$('#blocked').unblock();//解除

实现的思路：
我在主窗体中创建一个层，用来作为弹出窗体，包含一个iframe，通过参数指定URL，作为显示的内容，我觉得可能会有利于代码的重用，代码管理起来要方便一些
弹出窗口中含有的弹出窗口也在主窗体中创建，这样结构简单一点，比较容易管理。我在创建弹出窗口的时候在主窗体中声明一个栈，把当前iframe的window对象压入栈，这样不管我现在弹出了多少个窗口总能很容易的找到其中的任意一个的对象。

有感兴趣的把我的代码下载回去看看，然后给我提提意见，帮我提高。。。
觉得可用的随便用，有不明白的问我

新上传了修正版，修正了弹出框弹出位置不太精确的bug，新增无弹出窗体提示信息，用于类似Ajax请求等待。

再次上传修正版本2，此版本修正了二楼提出的bug，另外修复了进行局部block 后，弹出对话框不能正常unblock的bug

2009-7-8上传对ie6下不能遮挡select选框的修正版本（发现一个意想不到的bug，赶紧删掉）
分享到：
| jquery 实现的一个简单tab 很实用。。
评论
12 楼 whaosoft 2009-06-26  
呵呵 我喜欢这个 倍儿感谢楼主
11 楼 mikel 2009-06-26  
为什么不用thickbox？
10 楼 dugujiujian 2009-06-26  
能否再加个回调函数的功能
9 楼 dugujiujian 2009-06-26  
弹出的第二遮照框,关闭时,会把第一个也关闭掉
8 楼 flyfan 2009-06-26  
试了一下，很不错，希望继续完善
7 楼 willin2004 2009-06-26  
在ie中select是window类型的控件，它的index高于所有非window的控件，而div是浏览器渲染的，也就是说是用代码实时画出来的，根本不会覆盖标准的window控件，ie7以后的版本修正了这个bug。ie6中iframe是可以覆盖window控件的，而div又可以覆盖iframe，所以可以在div的下面建一个长宽100%的iframe就可以解决问题了，其实在我最初的版本中是有解决的，不过因为在我的项目中我使用的是div画的select，不存在这个问题所以后来的细化版本中也就没加上去，不过我会很快修正这个问题并上传的。
不过楼上讲的select显示不出来没看明白，回头我测试一下，今天恐怕不行了。。。
6 楼 xiang 2009-06-21  
还有问题：如果页面上有select，弹出窗口会被遮挡

测试代码如下：demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="content-type" content="text/html; charset=gbk"/>
<title>jQuery funkyUI plugin</title>

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.funkyUI.js"></script>

<script type="text/javascript">
$(document).ready(function(){

});

function Block(){
$.funkyUI({
url:"1.html",
OKEvent:okEvent,
css:{width:"700",height:"500"}
});
}
function Block2(){
$.funkyUI({
showDialog:false
});
}
function okEvent(){
alert('ok被点击');
}
function Alert(){

$.alert("这是警告窗口")
}
function Confirm(){
$.confirm("这是个Boolean窗口");
}
function onalert(){
alert("没有block");
}
function block(){
$('#blocked').block();
}
function unblock(){
$('#blocked').unblock();
}
</script>
</head>
<body>


<div id="main" name="main">
</div>&amp;&amp;
<div id="sub" name="sub">
123
</div>
<div>Have a nice day!</div>
<input type="button" value="click1" onclick="Block()" />
<input type="button" value="click2" onclick="Alert()" />
<input type="button" value="click3" onclick="Confirm()" />
<input type="button" value="click7" onclick="Block2()" />
<SELECT NAME="">
<OPTION VALUE="22222" SELECTED>2222222222222
<OPTION VALUE="">3333333333333333
</SELECT>
<select >
<option>11111111111111111111111
<option>11111111111111111111111
<option>11111111111111111111111
<option>11111111111111111111111
<option>11111111111111111111111
</select>

</br>
<div>Have a nice day!</div>
</br>
</br>
<input type="button" value="click4" onclick="block()" />
<input type="button" value="click5" onclick="unblock()" />
<div id="blocked" >
<input type="button" value="click6" onclick="onalert()" />
</div>
</body></html>




在test.html的测试页面中，select显示不出来，楼主也需要测试一下看是什么问题
5 楼 xieye 2009-06-19  
请楼主用prototype再实现一次，十分期待！
4 楼 you 2009-06-19  
效果不错，不过要改进地方挺多，resize啥的
go on
3 楼 menuhin 2009-06-18  
用了下，感觉非常不错！支持楼主继续完善！
2 楼 willin2004 2009-06-18  
二楼提出的问题我确实没有考虑到，在此表示感谢，我将代码进行了调整，问题已经解决。因为我是将最顶端的窗口作为弹出窗口的父窗口，而且所有嵌套弹出窗体都是在最顶端的窗口做处理，所以当第一个弹出窗体不在最顶端窗口时就出现了上述问题。还有一点需要注意的是最顶端的窗体需要导入funkyUI.js
1 楼 xiang 2009-06-17  
测试了一下，东东不错

但发现一个问题：
如果将测试页面放在iframe中，点击即报错，不能使用
楼主看是否能解决一下这个问题？？


测试代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk"/>
<title>jQuery funkyUI plugin</title>

</head>
<body>
<div align="center" >
<iframe src="demo.html" width="500px" height="500px"/>
</div>
</body>
</html>
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    封装JQuery Dialog实现Dialog、Tip、alert和confirm

    在IT行业中，jQuery Dialog是一种广泛使用的插件，用于创建弹出式对话框，提示框，警告框和确认框。这个“封装JQuery Dialog实现Dialog、Tip、alert和confirm”的主题聚焦于如何通过自定义代码来封装jQuery Dialog的...

    弹出窗口

    5. **异步通知**：在Web开发中，JavaScript的`alert`、`prompt`和`confirm`函数可以创建弹出窗口，但现代Web应用更倾向于使用`Promise`或`async/await`处理异步操作，如`Toast`通知或自定义模态框。 6. **库和框架*...

    Jquery样式化Alert

    可以将对话框内容封装在模态窗口（modal）中，使用CSS控制其显示和隐藏。 - 使用jQuery的`.on()`和`.off()`方法来绑定和解绑事件，确保对话框在正确的时间显示和关闭。 - 利用jQuery的动画效果（如`.fadeIn()`和`....

    jQueryAlert

    总结来说，"jQueryAlert"是一种利用jQuery实现的自定义提示对话框技术，它允许开发者摆脱浏览器默认对话框的限制，创造出更符合设计风格和用户习惯的确认与警告机制。通过HTML结构、CSS样式以及jQuery事件处理的结合...

    jQuery实现鼠标拖拽确认对话框弹出层特效源码.zip

    在本项目中，可能使用了`alert()`、`confirm()`或者自定义的模态对话框来实现这一功能。`confirm()`函数会弹出一个带有确定和取消按钮的对话框，根据用户的选择返回布尔值，这在需要用户确认是否离开页面时非常有用...

    jQuery EasyUI封装简化操作

    这些封装函数使得开发者在使用 jQuery EasyUI 时更加便捷，能够快速创建交互式的对话框、加载提示和窗口。它们降低了开发复杂度，提高了代码的可读性和可维护性，使得开发者可以更专注于业务逻辑而不是界面的实现...

    html弹出框

    在描述中提到，你已经用jQuery实现了一个自定义的弹出框，并且只需引入相关的CSS和JS文件，就能在页面上轻松调用这个功能。这表明你可能创建了一个自定义组件，它具有一定的可复用性和易用性。 首先，让我们来了解...

    超级漂亮的js弹出框效果

    使用媒体查询（media queries）和百分比单位可以实现弹出框在不同屏幕大小下的良好展示。 6. **插件和库**：有许多优秀的JavaScript库，如jQuery UI、SweetAlert、Bootbox.js等，它们提供了预设的弹出框样式和功能...

    jQuery弹框

    为了提高代码复用性和灵活性，许多开发者会选择使用现成的jQuery弹框插件，如jQuery UI的Dialog、bootstrap的Modal或SweetAlert2等。这些插件提供了丰富的配置选项和预设样式，可以快速集成到项目中，满足不同需求。...

    jquery-easyui-1.3.5

    jQuery EasyUI是基于jQuery的，因此理解jQuery的基本概念和语法是使用EasyUI的前提。 `EasyUI` 是一套基于jQuery的插件集合，它提供了一系列的UI组件，如对话框、表格、树形结构、表单验证、菜单等。这些组件都是...

    漂亮的js弹出框

    在JavaScript中，有几种常见的弹出框：`alert()`、`prompt()`和`confirm()`。这些内置函数简单易用，但样式单一，无法满足定制化需求。而"漂亮的js弹出框"则通过自定义代码实现了更加美观和功能丰富的弹出效果。 1....

    jQuery动画弹出确认框和警告框

    在网页开发中，jQuery库因其简洁的语法和强大的功能，被广泛用于实现各种交互效果，包括弹出对话框。本文将深入探讨如何使用jQuery来创建动画化的确认框和警告框，以此提供更丰富的用户体验。 首先，jQuery确认框...

    开发中经常用的图片和JS弹出框

    一些流行库如jQuery UI和SweetAlert提供了封装好的弹出框组件，方便快速实现此类功能。 在博文链接中，作者可能详细介绍了如何在项目中实现图片的优化加载和自定义JavaScript弹出框的创建过程，包括可能遇到的问题...

    jsWeb弹出框无依赖包括AlertConfirmToastLoadingNotifyModal

    本资源"jsWeb弹出框无依赖包括AlertConfirmToastLoadingNotifyModal"提供了一套完整的解决方案，无需依赖任何外部库，如jQuery或其他前端框架，使得开发者能够在纯JavaScript环境下方便地实现各种弹出框效果。...

    基于jquery的finkyUI插件与Ajax实现页面数据加载功能

    标题和描述中提到的知识点为使用jQuery以及finkyUI插件结合Ajax技术实现页面数据加载功能。finkyUI是一个基于jQuery的前端UI插件，它可以提供丰富的前端页面交互效果，如模态窗口、确认框、加载遮罩等。为了深入理解...

    jquery封装的对话框简单实现

    本篇文章将重点介绍如何使用jQuery来封装一个简单的对话框功能，这对于在网页中弹出提示、确认、错误或警告信息是非常实用的。 首先，我们定义了一些常量，用于表示不同类型的对话框图标样式，例如`_alert_iconCss`...

    Bootstrap3 插件.pdf_前端学习资料

    7. **EasyModal**：EasyModal 是一个基于 Bootstrap 的模态框扩展插件，提供了更多自定义功能，如 alert、confirm 和 prompt。使用方法如 `EasyModal.alert(msg, [callback, title, btnTextArray, params])`。 8. *...

    表示层操作提示Js弹窗类

    因此，对于需要更多用户交互或更复杂反馈的情况，开发者可能会选择使用`prompt()`或`confirm()`函数，或者使用更先进的UI库，如jQuery UI、Bootstrap的模态对话框，甚至Vue.js、React.js等现代前端框架提供的组件。...

    js和人机交互.rar

    6. **模态框和提示**：通过JavaScript，我们可以创建模态窗口或弹出提示，向用户提供信息或确认操作。例如，`alert()`、`confirm()`和`prompt()`是基本的对话框函数。 7. **路由管理**：在单页应用（SPA）中，...

Magicbox
Global site tag (gtag.js) - Google Analytics