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

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

阅读更多
闲来无事做了一个前台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对象压入栈,这样不管我现在弹出了多少个窗口总能很容易的找到其中的任意一个的对象。

有感兴趣的把我的代码下载回去看看,然后给我提提意见,帮我提高。。。

觉得可用的随便用,有不明白的问我
分享到:
评论
5 楼 yekui 2011-05-09  
jquery的messager。js 也是使用同样的方式 实现的么??有什么区别的呀??
4 楼 yekui 2011-05-09  
楼主 我想问下 为什么要使用iframe压栈呀?
3 楼 yekui 2011-05-09  
sblig 写道
iframe里  top.$.alert //警告提示对话框

再firefox 3.6 里弹出后无法关闭



请教一下 top.$.messager.alert("");这种写法 是什么意思呢,特别是top 我在这样使用的时候 总是说top.$.messager不是对象 为什么啊 ,需要导入什么js文件么??
2 楼 sblig 2011-03-07  
iframe里  top.$.alert //警告提示对话框

再firefox 3.6 里弹出后无法关闭
1 楼 hunter123456 2010-07-21  
感谢分享,
有个问题请教一下。
我在1.html中加上
<input type="text"  name="c_name">
请问在点击确认时,在demo.html页面如果获得
input中的值!!

相关推荐

    封装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)中,...

Global site tag (gtag.js) - Google Analytics