`

给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动

阅读更多

 

我们在调用系统的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("提示内容");
 

 

 

 

 

 

 

 

 

分享到:
评论
1 楼 陈颜宇 2015-06-11  
prompt在哪啊,只看到了confirm 和 alert

相关推荐

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

    7. **拖拽功能**:某些情况下,用户可能希望调整弹出框的位置,jQuery Alert 提供了拖动功能,使弹出框可以自由移动。 8. **键盘操作**:对于无障碍访问,jQuery Alert 支持键盘导航和快捷键,让用户可以通过键盘而...

    jQueryAlert插件

    此外,jQueryAlert还支持添加确认对话框,用户可以选择“是”或“否”,以及自定义对话框,包括添加输入框、复选框等元素。例如: ```javascript $.confirm({ title: "确认操作", text: "你确定要删除这个文件吗?...

    JQuery的Alert消息框插件使用介绍

    不仅如此,JQuery Alert插件的易用性和灵活性也意味着开发者可以在各种Web应用中轻松地添加和管理弹窗功能,无需为实现复杂的效果而编写大量代码。使用这种方法,开发者可以更加专注于核心业务逻辑的实现,而将用户...

    jQuery的弹出警告对话框美化插件

    5:如果你引入了jQuery UI Draggable plugin插件,那这个插件也可以被自由拖动。 详细出处参考:file:///F:/闫洪明/新建文件夹/1alerts/基于jQuery的弹出警告对话框美化插件(警告,确认和提示)_jquery_脚本之家....

    5个Jquery模态窗口

    它支持多种配置选项,如拖动、调整大小、自动定位等,且可以轻松地与现有的jQuery UI主题集成。但是,jQuery UI库较大,如果只用到Dialog功能,可能会显得资源冗余。 3. **FancyBox**:FancyBox最初是一个图片画廊...

    jquery各种弹出层效果

    这个插件允许开发者快速创建响应式的模态窗口,支持键盘导航、背景遮罩以及自定义触发器。通过CSS和JavaScript的结合,可以调整模态窗口的样式和交互。 3. **Fancybox和Colorbox** 这两个插件主要用于图片和媒体...

    基于jquery ui的alert,confirm方案(支持换肤)

    【jQuery UI Alert与Confirm方案详解】\n\n在网页开发中,我们经常需要弹出对话框来提示用户或获取用户的确认。原生JavaScript中的alert、confirm和prompt函数提供了基础的弹窗功能,但它们的样式和交互体验相对有限...

    JQuery UI 自学指南

    - **功能**:用于显示模态窗口,可以替代 alert、prompt 和 confirm 方法。 - **应用场景**:弹出对话框、提示信息等。 - **特点**:可定制性强,支持多种样式和按钮配置。 3. **滑动控件(Slider)** - **功能**...

    jquery之弹出框

    jQuery提供了多种创建弹出框的方法,如`alert()`、`confirm()`和`prompt()`,这些都是JavaScript内置的,但在jQuery中可以更方便地调用。除此之外,jQuery还有许多插件可以实现更加高级和自定义的弹出框效果,例如...

    jquery-提示框.zip

    虽然jQuery本身不支持`.alert()`和`.confirm()`,但可以通过插件实现类似功能。例如,`jQuery.alerts`插件提供了这些功能,可以自定义提示框的样式和行为。 4. **提示插件:SweetAlert2** SweetAlert2是一个流行...

    jQuery.AsyncBox v1.4.5 API.chm

    - 主要模拟常用的 alert、confirm、prompt、open 和扩展了一些对话框。 - 支持静止定位、无限极模态与非模态组合、引用 URL、同域 Iframe 数据互通、位置重设、页面跟随、动态效果、自定义内容、普通拖动、克隆拖动...

    jQuery LayerModel弹出层插件拖动弹出层效果

    jQuery LayerModel是一款基于jQuery的弹出层插件,它提供了丰富的功能,包括创建各种类型的弹出窗口,如提示、信息、确认、加载等,并且支持弹出层的拖动效果。在网页交互设计中,弹出层是常用的一种增强用户体验的...

    4种不同类型的jQuery弹出层对话框

    然而,与前两者一样,jQuery本身并不支持`prompt()`,因此需要直接使用JavaScript。例如: ```javascript var userInput = prompt('请输入你的名字'); console.log('你输入的名字是:' + userInput); ``` 用户...

    jquery弹出框插件

    jQuery弹出框插件可以替代浏览器自带的alert()、confirm()和prompt()函数,提供更美观且功能更强大的解决方案。以下是一些关键知识点: 1. **基本使用**:安装jQuery弹出框插件通常需要引入jQuery库和插件的...

    jquery和layer相关js插件

    2. **弹框类型**:Layer提供了`alert()`、`msg()`、`prompt()`、`dialog()`等多种弹窗类型,满足不同场景的需求。 3. **自定义配置**:通过参数对象可以配置弹窗的各种属性,如标题、内容、按钮、宽度、高度等。 4...

    jquery 弹出对话框 2个

    无论是jQuery UI Dialog还是jQuery Impromptu,都可以通过不同的配置项和API方法实现复杂的功能,如添加自定义按钮、设置关闭回调、加载动态内容等。它们都极大地丰富了网页的交互体验,使得弹出对话框的设计和实现...

    jquery弹出框带实例.rar

    除了这些基础的弹出框,jQuery还通过插件形式提供了更丰富的弹出框解决方案,例如jQuery UI中的Dialog组件,它提供了一种自定义的对话框,支持拖动、大小调整、自动定位等功能,可以创建复杂的弹窗交互体验。...

    jquery弹窗

    - **SweetAlert**: 这是一个现代的、美观的弹窗插件,可以替代传统的alert、confirm和prompt,提供更丰富的视觉效果和交互体验。 - **jQuery Modal**: 这个轻量级插件专注于基本的弹窗功能,适合对性能有较高要求的...

    jquery.dialogBox.js动画对话框插件.zip

    type: 'alert', // 类型,可选值:'alert', 'confirm', 'prompt' title: '警告', // 对话框标题 content: '这是一个示例对话框', // 内容 buttons: [ { text: '确定', callback: function() { /* 用户点击...

Global site tag (gtag.js) - Google Analytics