jquery自定义对话框alertconfirm和prompt

Posted 2020-08-14

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

英文版：http://keleyi.com/keleyi/phtml/jqplug/1.htm


这个Jquery插件的目的是替代javascript的标准函数alert()，confirm（），和 prompt（）。这个插件有如下这些特点：

1：这个插件可以使你可以支持你自己的css制定。使你的网站看起来更专业。

2：允许你自定义对话框的标题。

3：在ＩＥ７中，可以使你避免使用JavaScript 的prompt()函数带来的页面重新加载。

4：这些方法都模拟了Windows的模式对话框。在你改变改变浏览器窗口大小时候，它能够自适应用户

窗口的调整。

5：如果你引入了jQuery UI Draggable plugin插件，那这个插件也可以被自由拖动。


jquery.alerts.js代码：

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

英文版：http://keleyi.com/keleyi/phtml/jqplug/1.htm


这个Jquery插件的目的是替代JavaScript的标准函数alert()，confirm（），和 prompt（）。这个插件有如下这些特点：

1：这个插件可以使你可以支持你自己的css制定。使你的网站看起来更专业。

2：允许你自定义对话框的标题。

3：在ＩＥ７中，可以使你避免使用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 time

verticalOffset: -75, // vertical offset of the dialog from center screen, in pixels
horizontalOffset: 0, // horizontal offset of the dialog from center screen, in pixels/
repositionOnResize: true, // re-centers the dialog on window resize
overlayOpacity: .01, // transparency level of overlay
overlayColor: ‘#FFF‘, // base color of overlay
draggable: true, // make the dialogs draggable (requires UI Draggables plugin)
okButton: ‘ OK ‘, // text for the OK button
cancelButton: ‘ Cancel ‘, // text for the Cancel button
dialogClass: null, // if specified, this class will be applied to all dialogs

// Public methods

alert: 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(
‘<div id="popup_container">‘ +
‘<h1 id="popup_title"></h1>‘ +
‘<div id="popup_content">‘ +
‘<div id="popup_message"></div>‘ +
‘</div>‘ +
‘</div>‘);

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, ‘<br />‘) );

$("#popup_container").css({
minWidth: $("#popup_container").outerWidth(),
maxWidth: $("#popup_container").outerWidth()
});

$.alerts._reposition();
$.alerts._maintainPosition(true);

switch( type ) {
case ‘alert‘:
$("#popup_message").after(‘<div id="popup_panel"><input type="button" value="‘ + $.alerts.okButton + ‘" id="popup_ok" /></div>‘);
$("#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(‘<div id="popup_panel"><input type="button" value="‘ + $.alerts.okButton + ‘" id="popup_ok" /> <input type="button" value="‘ + $.alerts.cancelButton + ‘" id="popup_cancel" /></div>‘);
$("#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(‘<br /><input type="text" size="30" id="popup_prompt" />‘).after(‘<div id="popup_panel"><input type="button" value="‘ + $.alerts.okButton + ‘" id="popup_ok" /> <input type="button" value="‘ + $.alerts.cancelButton + ‘" id="popup_cancel" /></div>‘);
$("#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 draggable
if( $.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(‘<div id="popup_overlay"></div>‘);
$("#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 fix
if (‘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 functions
jAlert = 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>

更多信息请访问：http://keleyi.com/a/bjac/no0m3cb1.htm