博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery自定义对话框alert、confirm和prompt
阅读量:5130 次
发布时间:2019-06-13

本文共 7930 字,大约阅读时间需要 26 分钟。

jQuery Alert Dialogs,又一个基于jQuery的提示框插件,主要包括Alert、Confirm、prompt这三种,还有一个高级范例,可以在提示框内嵌入HTML语言,可以自定义风格样式。jQuery的提示框插件有很多种,每一款都是出自不同的高人之手,因此都比较有自己的特点,包括风格和使用方法等。

效果体验:
英文版:
这个Jquery插件的目的是替代JavaScript的标准函数aert(),confirm(),和 prompt()。这个插件有如下这些特点:
1:这个插件可以使你可以支持你自己的css制定。使你的网站看起来更专业。
2:允许你自定义对话框的标题。
3:在IE7中,可以使你避免使用JavaScript 的prompt()函数带来的页面重新加载。
4:这些方法都模拟了Windows的模式对话框。在你改变改变浏览器窗口大小时候,它能够自适应用户
窗口的调整。
5:如果你引入了jQuery UI Draggable plugin插件,那这个插件也可以被自由拖动。
jquery.alerts.js代码:

jQuery Alert Dialogs,又一个基于jQuery的提示框插件,主要包括Alert、Confirm、prompt这三种,还有一个高级范例,可以在提示框内嵌入HTML语言,可以自定义风格样式。jQuery的提示框插件有很多种,每一款都是出自不同的高人之手,因此都比较有自己的特点,包括风格和使用方法等。

效果体验:
英文版:
这个Jquery插件的目的是替代JavaScript的标准函数aert(),confirm(),和 prompt()。这个插件有如下这些特点:
1:这个插件可以使你可以支持你自己的css制定。使你的网站看起来更专业。
2:允许你自定义对话框的标题。
3:在IE7中,可以使你避免使用JavaScript 的prompt()函数带来的页面重新加载。
4:这些方法都模拟了Windows的模式对话框。在你改变改变浏览器窗口大小时候,它能够自适应用户
窗口的调整。
5:如果你引入了jQuery UI Draggable plugin插件,那这个插件也可以被自由拖动。
jquery.alerts.js代码:

// Download by http://keleyi.com// 由 柯乐义 改进改插件,使插件适用于新版的jquery(比如1.10.1) 版本// Visit http://keleyi.com/a/bjac/no0m3cb1.htm for more information//// Usage://     jAlert( message, [title, callback] )//     jConfirm( message, [title, callback] )//     jPrompt( message, [value, title, callback] )// // History:////     1.00 - Released (29 December 2008)// 2013-7-8(function($) {$.alerts = {// These properties can be read/written by accessing $.alerts.propertyName from your scripts at any timeverticalOffset: -75, // vertical offset of the dialog from center screen, in pixelshorizontalOffset: 0, // horizontal offset of the dialog from center screen, in pixels/repositionOnResize: true, // re-centers the dialog on window resizeoverlayOpacity: .01, // transparency level of overlayoverlayColor: '#FFF', // base color of overlaydraggable: true, // make the dialogs draggable (requires UI Draggables plugin)okButton: ' OK ', // text for the OK buttoncancelButton: ' Cancel ', // text for the Cancel buttondialogClass: null, // if specified, this class will be applied to all dialogs// Public methodsalert: function(message, title, callback) {if( title == null ) title = 'Alert';$.alerts._show(title, message, null, 'alert', function(result) {if( callback ) callback(result);});},confirm: function(message, title, callback) {if( title == null ) title = 'Confirm';$.alerts._show(title, message, null, 'confirm', function(result) {if( callback ) callback(result);});},prompt: function(message, value, title, callback) {if( title == null ) title = 'Prompt';$.alerts._show(title, message, value, 'prompt', function(result) {if( callback ) callback(result);});},// Private methods_show: function(title, msg, value, type, callback) {$.alerts._hide();$.alerts._overlay('show');$("BODY").append('
');if( $.alerts.dialogClass ) $("#popup_container").addClass($.alerts.dialogClass);// IE6 Fixvar pos = ('undefined' == typeof (document.body.style.maxHeight)) ? 'absolute' : 'fixed';$("#popup_container").css({position: pos,zIndex: 99999,padding: 0,margin: 0});$("#popup_title").text(title);$("#popup_content").addClass(type);$("#popup_message").text(msg);$("#popup_message").html( $("#popup_message").text().replace(/\n/g, '
') );$("#popup_container").css({minWidth: $("#popup_container").outerWidth(),maxWidth: $("#popup_container").outerWidth()});$.alerts._reposition();$.alerts._maintainPosition(true);switch( type ) {case 'alert':$("#popup_message").after('
');$("#popup_ok").click( function() {$.alerts._hide();callback(true);});$("#popup_ok").focus().keypress( function(e) {if( e.keyCode == 13 || e.keyCode == 27 ) $("#popup_ok").trigger('click');});break;case 'confirm':$("#popup_message").after('
');$("#popup_ok").click( function() {$.alerts._hide();if( callback ) callback(true);});$("#popup_cancel").click( function() {$.alerts._hide();if( callback ) callback(false);});$("#popup_ok").focus();$("#popup_ok, #popup_cancel").keypress( function(e) {if( e.keyCode == 13 ) $("#popup_ok").trigger('click');if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');});break;case 'prompt':$("#popup_message").append('
').after('
');$("#popup_prompt").width( $("#popup_message").width() );$("#popup_ok").click( function() {var val = $("#popup_prompt").val();$.alerts._hide();if( callback ) callback( val );});$("#popup_cancel").click( function() {$.alerts._hide();if( callback ) callback( null );});$("#popup_prompt, #popup_ok, #popup_cancel").keypress( function(e) {if( e.keyCode == 13 ) $("#popup_ok").trigger('click');if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');});if( value ) $("#popup_prompt").val(value);$("#popup_prompt").focus().select();break;}// Make draggableif( $.alerts.draggable ) {try {$("#popup_container").draggable({ handle: $("#popup_title") });$("#popup_title").css({ cursor: 'move' });} catch(e) { /* requires jQuery UI draggables */ }}},_hide: function() {$("#popup_container").remove();$.alerts._overlay('hide');$.alerts._maintainPosition(false);},_overlay: function(status) {switch( status ) {case 'show':$.alerts._overlay('hide');$("BODY").append('
');$("#popup_overlay").css({position: 'absolute',zIndex: 99998,top: '0px',left: '0px',width: '100%',height: $(document).height(),background: $.alerts.overlayColor,opacity: $.alerts.overlayOpacity});break;case 'hide':$("#popup_overlay").remove();break;}},_reposition: function() {var top = (($(window).height() / 2) - ($("#popup_container").outerHeight() / 2)) + $.alerts.verticalOffset;var left = (($(window).width() / 2) - ($("#popup_container").outerWidth() / 2)) + $.alerts.horizontalOffset;if( top < 0 ) top = 0;if( left < 0 ) left = 0;// IE6 fixif ('undefined' == typeof (document.body.style.maxHeight)) top = top + $(window).scrollTop();$("#popup_container").css({top: top + 'px',left: left + 'px'});$("#popup_overlay").height( $(document).height() );},_maintainPosition: function(status) {if( $.alerts.repositionOnResize ) {switch(status) {case true:$(window).bind('resize', function() {$.alerts._reposition();});break;case false:$(window).unbind('resize');break;}}}}// Shortuct functionsjAlert = function(message, title, callback) {$.alerts.alert(message, title, callback);}jConfirm = function(message, title, callback) {$.alerts.confirm(message, title, callback);};jPrompt = function(message, value, title, callback) {$.alerts.prompt(message, value, title, callback);};})(jQuery);

CSS 代码:

#popup_container {
font-family: Arial, sans-serif;font-size: 12px;min-width: 300px; /* Dialog will be no smaller than this */max-width: 600px; /* Dialog will wrap after this width */background: #FFF;border: solid 5px #999;color: #000;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}/* http://keleyi.com 柯乐义*/#popup_title {
font-size: 14px;font-weight: bold;text-align: center;line-height: 1.75em;color: #666;background: #CCC url(images/title.gif) top repeat-x;border: solid 1px #FFF;border-bottom: solid 1px #999;cursor: default;padding: 0em;margin: 0em;}#popup_content {
background: 16px 16px no-repeat url(http://keleyi.com/keleyi/phtml/jqplug/index/info.gif);padding: 1em 1.75em;margin: 0em;}#popup_content.alert {
background-image: url(http://keleyi.com/keleyi/phtml/jqplug/index/info.gif);}#popup_content.confirm {
background-image: url(http://keleyi.com/keleyi/phtml/jqplug/index/important.gif);}#popup_content.prompt {
background-image: url(http://keleyi.com/keleyi/phtml/jqplug/index/help.gif);}#popup_message {
padding-left: 48px;}#popup_panel {
text-align: center;margin: 1em 0em 0em 1em;}#popup_prompt {
margin: .5em 0em;}

还需引用:

<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
<script src="http://keleyi.com/keleyi/pmedia/jquery/ui/1.10.3/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>

更多信息请访问:

转载于:https://www.cnblogs.com/ouyangfeifei/p/5951782.html

你可能感兴趣的文章
Android的ListView详解
查看>>
Python开发基础--- Event对象、队列和多进程基础
查看>>
11.27号
查看>>
如何学习
查看>>
程序代码表现形式感悟
查看>>
java程序的框架
查看>>
HDU-4647 Another Graph Game 贪心,博弈
查看>>
easyui datagrid.gridFilter搜索插件
查看>>
Unity GameObject 对象池
查看>>
RepotService添加空格符
查看>>
IP Address Configuration on Linux (RHEL 5.4)
查看>>
JS浏览器检测判断
查看>>
使用linux内核hrtimer高精度定时器实现GPIO口模拟PWM,【原创】
查看>>
Xshell配色方案啊【学习笔记】
查看>>
10秒钟执行一次计划任务
查看>>
Java魔法堂:类加载机制入了个门
查看>>
缺货流程
查看>>
去除inline-block元素间间距的N种方法
查看>>
hdu4965矩阵快速幂
查看>>
Tensorflow 学习三 可视化
查看>>