- 浏览: 151968 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
陈颜宇:
prompt在哪啊,只看到了confirm 和 alert
给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动 -
陈小妞:
alert(el.getAttribute("cla ...
Javascript兼容性之——getAttribute(),setAttribute()(获取设置属性) -
I白I:
厉害。。。
HTML5实现全屏API【进入和退出全屏】 -
joyven:
...
Javascript兼容性之——getAttribute(),setAttribute()(获取设置属性) -
小林夕:
看看一个用canvas到极致的案例 ProcessOn
HTML5 Canvas实战——HTML5 Canvas时间效果
给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动
- 博客分类:
- CSS
- jQuery插件系列
- Javascript
我们在调用系统的Alert,prompt的弹出提示时,不同的系统会有不同的提示框,视觉效果不统一,而且不好看,功能单一,现在我们通过Jquery模拟Alert,prompt,现实统一视觉效果,而且内容丰富的弹出提示。
Jquery可以扩展自己的功能,如果对Jquery开发插件不熟悉的人可以到官方网去看看文档,比较简单易懂。
/* * 本插件基于JQUERY * Jquery版本: 1.7.2 * Date:2012-06-28 * Author:Kingwell * E-mail:jinhua.leng##gmail.com * * ---------- 接口说明: ---------- * * --本插件采用kw命名空间,给Jquery添加静态方法,故调用方法为 $.kw.方法名 参数如下: * --调用方法: * --alert $.kw.alert(content,title,callBack) * --prompt $.kw.prompt(title,content,callBack) * * * -- title 标题名称 如果缺省,则为默认标题,如:"系统提示" * -- content 内容显示的内容 * --callback 回调函数,单击确定后要执行的内容 * * * --功能:类似系统功能,支持拖动,响应键盘事件,ESC退出,Enter确定,以及回调函数功能。 * * */ $(function () { $.kw = { title : "System information", //默认标题 可修改 speed : 400, //默认速度 可修改 buttonName : "OK", //确定按钮默认名称 可修改 cancel : "Cancel", //取消按钮默认名称 可修改 content : "Content", //移除遮盖层 del : function () { $("#alert-layer").remove(); }, //响应ESC键盘退出 esc : function () { $(document).keyup(function (event) { if (event.which == 27) { $.kw.del(); } }); }, //内容显示功能 alert : function (sContent, sTitle, callBack) { var title = sTitle || this.title; var layer = "<div id='alert-layer'><div id='alert-container'><div class='alert-top'></div><div class='alert-box'><div id='alert-title'>" + title + "<div id='alert-close' title='Close'></div></div><div id='alert-content'>" + sContent + "</div><div class='alert-button'><button id='alert-button'>" + this.buttonName + "</button></div></div><div class='alert-bottom'></div></div></div>"; $(layer).fadeIn(this.speed).appendTo("body"); this.setting(); this.move(); $("#alert-button").focus(); $("#alert-close").bind("click", this.del); //移除层 $("#alert-button").bind("click", function () { if (callBack) { callBack(); } $.kw.del(); }); //移除层 this.esc(); }, //提示 confirm : function (sContent, callBack, sTitle) { var title = sTitle || this.title; var content = sContent || this.content; var layer = "<div id='alert-layer'><div id='alert-container'><div class='alert-top'></div><div class='alert-box'><div id='alert-title'>" + title + "<div id='alert-close' title='Close'></div></div><div id='alert-content'>" + sContent + "</div><div class='alert-button'><button id='alert-button'>" + this.buttonName + "</button><button id='alert-cancel'>" + this.cancel + "</button></div></div><div class='alert-bottom'></div></div></div>"; $(layer).fadeIn(this.speed).appendTo("body"); this.setting(); $("#alert-button").focus(); //获得焦点 this.move(); //拖动 $("#alert-close").bind("click", this.del); //移除层 $("#alert-cancel").bind("click", this.del); //移除层 $("#alert-button").bind("click", function () { $.kw.del(); if (callBack) { callBack(); }; }); //移除层 this.esc(); }, //框拖动功能 move : function () { $("#alert-title").mousedown(function (event) { var l = parseInt($("#alert-container").css("left")), t = parseInt($("#alert-container").css("top")); x = event.pageX - l; y = event.pageY - t; $("body").bind("mousemove", function (event) { $("#alert-container").css({ "left" : (event.pageX - x) }); $("#alert-container").css({ "top" : (event.pageY - y) }); //$("#alert-container").fadeTo(0,0.9) }); }); $("body").mouseup(function () { $("body").unbind("mousemove"); //$("#alert-container").fadeTo(0,1) }); }, //设置背景层与内位置 setting : function () { var bcw = document.documentElement.clientWidth, bch = document.documentElement.clientHeight, bsh = document.documentElement.scrollHeight, aw = $("#alert-container").width() / 2, ah = $("#alert-container").height() / 2; $("#alert-layer").css("height", bsh); $("#alert-container").css({ "top" : bch / 2 - ah, "left" : bcw / 2 - aw }); } //$.kw End }; });
#alert-layer button:focus{border:1px solid #AAA!important; background:#789!important; color:white; outline:none} #alert-layer{position:absolute;left:0;top:0;width:100%;height:100%;color:#333;line-height:1;z-index:10000; background:rgba(0,0,0,0.1)} #alert-layer #alert-container{border-radius:3px; padding:10px; width:390px; position:fixed; _position:absolute;} #alert-layer .alert-top{background:url(images/conner2.png) no-repeat left top; height:10px;} #alert-layer .alert-bottom{background:url(images/conner2.png) no-repeat left bottom; height:10px;} #alert-layer #alert-title{font-size:15px; height:30px;line-height:25px;padding:0 10px;position:relative;font-weight:bold;cursor:move;} #alert-layer #alert-close{background: url(images/close.gif) no-repeat center center; width:25px; height:25px; position:absolute; cursor:pointer; right:2px; top:0px;} #alert-layer .alert-button{ padding:5px 10px; text-align:right} #alert-layer #alert-content{background:#F1F1F1; border-top:1px solid #B9B9B9; border-bottom:1px solid #B9B9B9; padding:10px 15px;} .alert-box{background:url(images/tc_bg.png) repeat-y left top; padding:0 6px} #alert-layer button{padding:5px; border:1px solid #CCC; margin:auto 5px; border-radius:2px; min-width:60px;} #alert-layer h1,#alert-layer h2,#alert-layer h3,#alert-layer h4{margin:10px auto; font-size:16px}
调用方法:
$.kw.alert("提示内容") $.kw.alert("提示内容","系统提示")//修改弹出框提示标题 $.kw.comport("提示内容");
发表评论
-
一款小巧精美的浏览器必备工具(支持Chrome,Edge)
2024-04-28 11:28 313一键清洁大师:专业的浏览器数据清理工具;超美动画,炫酷特效, ... -
Backbone1.0.0数据验证的变化
2014-07-10 09:48 8100.5.3版本对Model数据验证时,绑定Error就可以了 ... -
使用Sass预定义一些常用的样式,非常方便
2014-06-04 11:04 1375各种新技术的出现,推动着Web前端技术飞速发展,在提升用户体 ... -
使用Sass预定义一些常用的样式,非常方便
2014-06-04 11:03 1344CSS预处理技术现在已经非常成熟,比较流行的有Less,Sa ... -
去掉IE10+input 文本后面“删除图标”与密码文本框后面“查看密码图标”
2014-05-04 15:38 1359在最新的IE浏览器(IE10+)上使用表单时,文本框内 ... -
CSS实现箭头效果
2013-09-23 15:26 1910有时候网页中使用箭头以增强效果,一般的做法是使用图片,今天我 ... -
IE6透明PNG解决方案
2013-09-17 19:31 2004IE6不支持PNG-24图片一直困扰很多人,但是可以通过I ... -
清除HTML之间的空白节点
2013-09-01 16:57 5705HTML之间的空白节点,会影响HTML排版,清除空白节点除了 ... -
attachEvent 中this指向
2013-09-01 16:45 1516IE中使用的事件绑定函数与Web标准的不同,而且this指向 ... -
十六制作颜色转RGB格式
2013-09-01 16:15 1343十六制作颜色转RGB格式: function toR ... -
kingwell Calendar V1.0 日历时间组件
2013-08-07 09:10 1359项目中经常要使用日历时间插件,网上也有很多很优秀的插件,但是 ... -
HTML5获取地理位置信息并在Google Maps上显示
2013-08-07 09:08 1127使用HTML5 navigator geol ... -
HTML5 Canvas实战——HTML5 Canvas时间效果
2013-08-07 09:04 1566HTML5 Canvas实战 function cl ... -
JS window.name跨域封装
2013-08-07 09:02 1925function CrossDomainName(targe ... -
前端开发工程师如何在2013年里提升自己【转】
2013-07-10 10:33 855大部分人非常在意个人在技术上的提升。但是保持对新技术的了解是 ... -
动态加载javascript增强版
2013-04-21 10:25 1614我们经常使用动态加 ... -
jQuery性能优化的28个建议 (转)
2013-04-20 12:08 878我一直在寻找有关jQuery ... -
封装JSONP
2013-04-01 13:06 5005我们经常遇到JS 跨域的问题,跨域的解决方案有很多,JSO ... -
HTML5 Web Storage
2013-03-21 11:56 1999体验了一下HTML5 在HTML5中,除了Canvas元素 ... -
计算时间差
2013-03-21 11:15 1537<!DOCTYPE HTML> <html ...
相关推荐
7. **拖拽功能**:某些情况下,用户可能希望调整弹出框的位置,jQuery Alert 提供了拖动功能,使弹出框可以自由移动。 8. **键盘操作**:对于无障碍访问,jQuery Alert 支持键盘导航和快捷键,让用户可以通过键盘而...
此外,jQueryAlert还支持添加确认对话框,用户可以选择“是”或“否”,以及自定义对话框,包括添加输入框、复选框等元素。例如: ```javascript $.confirm({ title: "确认操作", text: "你确定要删除这个文件吗?...
不仅如此,JQuery Alert插件的易用性和灵活性也意味着开发者可以在各种Web应用中轻松地添加和管理弹窗功能,无需为实现复杂的效果而编写大量代码。使用这种方法,开发者可以更加专注于核心业务逻辑的实现,而将用户...
5:如果你引入了jQuery UI Draggable plugin插件,那这个插件也可以被自由拖动。 详细出处参考:file:///F:/闫洪明/新建文件夹/1alerts/基于jQuery的弹出警告对话框美化插件(警告,确认和提示)_jquery_脚本之家....
它支持多种配置选项,如拖动、调整大小、自动定位等,且可以轻松地与现有的jQuery UI主题集成。但是,jQuery UI库较大,如果只用到Dialog功能,可能会显得资源冗余。 3. **FancyBox**:FancyBox最初是一个图片画廊...
这个插件允许开发者快速创建响应式的模态窗口,支持键盘导航、背景遮罩以及自定义触发器。通过CSS和JavaScript的结合,可以调整模态窗口的样式和交互。 3. **Fancybox和Colorbox** 这两个插件主要用于图片和媒体...
【jQuery UI Alert与Confirm方案详解】\n\n在网页开发中,我们经常需要弹出对话框来提示用户或获取用户的确认。原生JavaScript中的alert、confirm和prompt函数提供了基础的弹窗功能,但它们的样式和交互体验相对有限...
- **功能**:用于显示模态窗口,可以替代 alert、prompt 和 confirm 方法。 - **应用场景**:弹出对话框、提示信息等。 - **特点**:可定制性强,支持多种样式和按钮配置。 3. **滑动控件(Slider)** - **功能**...
jQuery提供了多种创建弹出框的方法,如`alert()`、`confirm()`和`prompt()`,这些都是JavaScript内置的,但在jQuery中可以更方便地调用。除此之外,jQuery还有许多插件可以实现更加高级和自定义的弹出框效果,例如...
虽然jQuery本身不支持`.alert()`和`.confirm()`,但可以通过插件实现类似功能。例如,`jQuery.alerts`插件提供了这些功能,可以自定义提示框的样式和行为。 4. **提示插件:SweetAlert2** SweetAlert2是一个流行...
- 主要模拟常用的 alert、confirm、prompt、open 和扩展了一些对话框。 - 支持静止定位、无限极模态与非模态组合、引用 URL、同域 Iframe 数据互通、位置重设、页面跟随、动态效果、自定义内容、普通拖动、克隆拖动...
jQuery LayerModel是一款基于jQuery的弹出层插件,它提供了丰富的功能,包括创建各种类型的弹出窗口,如提示、信息、确认、加载等,并且支持弹出层的拖动效果。在网页交互设计中,弹出层是常用的一种增强用户体验的...
然而,与前两者一样,jQuery本身并不支持`prompt()`,因此需要直接使用JavaScript。例如: ```javascript var userInput = prompt('请输入你的名字'); console.log('你输入的名字是:' + userInput); ``` 用户...
jQuery弹出框插件可以替代浏览器自带的alert()、confirm()和prompt()函数,提供更美观且功能更强大的解决方案。以下是一些关键知识点: 1. **基本使用**:安装jQuery弹出框插件通常需要引入jQuery库和插件的...
2. **弹框类型**:Layer提供了`alert()`、`msg()`、`prompt()`、`dialog()`等多种弹窗类型,满足不同场景的需求。 3. **自定义配置**:通过参数对象可以配置弹窗的各种属性,如标题、内容、按钮、宽度、高度等。 4...
无论是jQuery UI Dialog还是jQuery Impromptu,都可以通过不同的配置项和API方法实现复杂的功能,如添加自定义按钮、设置关闭回调、加载动态内容等。它们都极大地丰富了网页的交互体验,使得弹出对话框的设计和实现...
除了这些基础的弹出框,jQuery还通过插件形式提供了更丰富的弹出框解决方案,例如jQuery UI中的Dialog组件,它提供了一种自定义的对话框,支持拖动、大小调整、自动定位等功能,可以创建复杂的弹窗交互体验。...
- **SweetAlert**: 这是一个现代的、美观的弹窗插件,可以替代传统的alert、confirm和prompt,提供更丰富的视觉效果和交互体验。 - **jQuery Modal**: 这个轻量级插件专注于基本的弹窗功能,适合对性能有较高要求的...
type: 'alert', // 类型,可选值:'alert', 'confirm', 'prompt' title: '警告', // 对话框标题 content: '这是一个示例对话框', // 内容 buttons: [ { text: '确定', callback: function() { /* 用户点击...