Bootstrap弹出消息通知框和信息提示层jQuery插件_美化alert弹窗插件

一款功能非常强大的jQuery消息通知框和信息提示框插件。这个插件分为两个部分：消息通知框和信息提示框。它能非常好的结合Bootstrap使用。使用方法使用时要引入jQuery和lobibox.min.js以及lobibox.min.css文件。 创建信息提示框// ConfirmLobibox.confirm({ ... //Options}); // AlertLobibox.alert( 'error|success|warning|info', // Any of the following { ... //Options }); // PromptLobibox.prompt( '', // Any HTML5 input type is valid { //Options }); // ProgressLobibox.progress({ //Options}); // WindowLobibox.window({ //Options}); 信息提示框的默认参数horizontalOffset: 5, width : 600, // Height is automatically given calculated by widthheight : 'auto', // Show close button or notcloseButton : true, // Make messagebox draggable draggable : false, // Class for custom buttonscustomBtnClass : 'lobibox-btn-default', modal : true,debug : false, // Position where buttons should be alignedbuttonsAlign : 'center', // Close messagebox on Esc presscloseOnEsc : true, //Overriding default optionsLobibox.base.DEFAULTS = $.extend({}, Lobibox.base.DEFAULTS, { //override any options from default options}); 信息提示框的可用参数Lobibox.base.OPTIONS = { // DO NOT change this value. // Some functionality is depended on itbodyClass : 'lobibox-open', // DO NOT change this object. // Some functionality is depended on itmodalClasses : { 'error' : 'lobibox-error', 'success' : 'lobibox-success', 'info' : 'lobibox-info', 'warning' : 'lobibox-warning', 'confirm' : 'lobibox-confirm', 'progress' : 'lobibox-progress', 'prompt' : 'lobibox-prompt', 'default' : 'lobibox-default', 'window' : 'lobibox-window'}, // This is option how buttons can be shown. // What are buttonsAlign option available valuesbuttonsAlign: ['left', 'center', 'right'], // You can change the title or class of buttons from here or use the same structure object for button when creating messagebox// closeOnClick : true will close the messagebox when clicking this type of button. // Set it to false not to close messagebox when clicking on itbuttons: { ok: { 'class': 'lobibox-btn lobibox-btn-default', text: 'OK', closeOnClick: true },cancel: { 'class': 'lobibox-btn lobibox-btn-cancel', text: 'Cancel', closeOnClick: true }, yes: { 'class': 'lobibox-btn lobibox-btn-yes', text: 'Yes', closeOnClick: true }, no: { 'class': 'lobibox-btn lobibox-btn-no', text: 'No', closeOnClick: true }}};//Overriding default optionsLobibox.base.OPTIONS = $.extend({}, Lobibox.base.OPTIONS, {... //override any options except those above which is written "DO NOT change"});创建消息通知框Lobibox.notify( // 'warning', 'info', 'success', 'error' 'warning', { ... });消息通知框的默认参数title: true, // normal, mini, large size: 'normal', // Show animation class. (Uses animate.css) showClass: 'flipInX', // Hide animation class (Uses animate.css)hideClass: 'zoomOutDown', // Icon of notification. // Leave as is for default icon or set custom stringicon: true, // Message of notification msg: '', // Image source string img: null, // Make notifications closable closable: true, // Hide notification after this time (in miliseconds) delay: 5000, // Show timer indicator delayIndicator: true, // Close notifications by clicking on themcloseOnClick: true, // Width of notification box width: 400, // Sound of notification. Set this false to disable sound. // Leave as is for default sound or set custom soud path sound: true, // Place to show notification. // Available options: "top left", "top right", "bottom left", "bottom right" position: "bottom right" // Overriding default optionsLobibox.notify.DEFAULTS = $.extend({}, Lobibox.notify.DEFAULTS, { ... //override any options from default options});

在线演示        积分下载        6毛下载        砍两刀下载