Skip to content

Repository files navigation

EasyModal - Bootstrap


EasyModal 是一个 Bootstrap 模态框扩展插件,能提供 alert, confirm, prompt, modal 自定义 等功能,简单易用。

EasyModal is a Bootstrap Modal extension plugin, can provide alert, confirm, prompt, modal custom function and so on, simple and easy to use.

latest version: 1.2.0-RELEASE

安装

  • Download

  • Bower

bower install easymodal-bootstrap
  • npm
npm install easymodal-bootstrap

Getting started/开始使用

<!-- Bootstrap start --><linkrel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"><scriptsrc="jquery/jquery-3.1.0.min.js"></script><scriptsrc="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><!-- Bootstrap end --><!-- Bootstrap EasyModal START --><scriptsrc="dist/easy.bootstrap.easymodal-1.2.0.min.js"></script><!-- put your locale files after easy.bootstrap.easymodel.js --><scriptsrc="dist/lang/easy.bootstrap.easymodal-lang-en.js"></script><!-- Bootstrap EasyModal END -->

API

Core API

EasyModal.alert(msg,[callback,title,btnTextArray,params]);EasyModal.confirm(msg,[callback,title,btnTextArray,params]);EasyModal.prompt(msg,[defaultValue,callback,title,btnTextArray,params]);EasyModal.modal(title,content,modalFooter,[params]);

params

{// 'modal-sm', '', 'modal-lg'; default is ''; the modal size// 模态对话框大小; 可选值 'modal-sm', '', ' modal-lg'; 默认为 ''size: '',// true, false; default is true; enable fadeIn and fadeOut effect// 开启渐入渐出动画效果;可选值 true, false; 默认为 true fade: true,// true, 'static'; default is true; specify 'static' for a backdrop which doesn't close the modal on click// 点击模块背景是否自动关闭, 'static' 为不关闭; 可选值 true, 'static'; 默认为 truebackdrop: true,// true, false; default is true; specify true for enter ESC key to close modal dialog// 键盘上的 esc 键被按下时关闭模态框;可选值 true, false;默认为 truekeyboard: true}

Global params

EasyModal.defaults={// 'modal-sm', '', 'modal-lg'; default is ''; the modal sizesize: '',// true, false; default is true; enable fadeIn and fadeOut effectfade: true,// true, 'static'; default is true; specify 'static' for a backdrop which doesn't close the modal on clickbackdrop: true,// true, false; default is true; specify true for enter ESC key to close modal dialogkeyboard: true}

Usage/用例

<buttonid="alertBtn"type="button"class="btn btn-warning">EasyModal.alert()</button><buttonid="confirmBtn"type="button"class="btn btn-danger">EasyModal.confirm()</button><buttonid="promptBtn"type="button"class="btn btn-primary">EasyModal.prompt()</button><buttonid="modalBtn"type="button"class="btn btn-info">EasyModal.modal()</button><buttonid="alertBtn2"type="button"class="btn btn-warning">User EasyModal.alert()</button><buttonid="confirmBtn2"type="button"class="btn btn-danger">UserEasyModal.confirm()</button>$(function(){$("#alertBtn").on("click",function(){// EasyModal.alert( msg, [callback, title, btnTextArray, params] )	EasyModal.alert('Account invalidate!');})$("#confirmBtn").on("click",function(){// EasyModal.confirm( msg, [callback, title, btnTextArray, params] )	EasyModal.confirm('Sure you want to delete it!',function(res){EasyModal.alert('You choice :'+res);});})$("#promptBtn").on("click",function(){// EasyModal.prompt( msg, [defaultValue, callback, title, btnTextArray, params] )	EasyModal.prompt('Input your age: ',18,function(res){EasyModal.alert('Your age is:'+res);});})$("#modalBtn").on("click",function(){// EasyModal.modal(title , content , modalFooter, [params])EasyModal.modal('ModalTitle','This is a demo!','Add button');})$("#alertBtn2").on("click",function(){// EasyModal.alert( msg, [callback, title, btnTextArray, params] )	EasyModal.alert('Account invalidate!',null,"User Title",['User OK Button'],{size: 'modal-sm',fade: false,backdrop: 'static',keyboard: false});})$("#confirmBtn2").on("click",function(){// EasyModal.confirm( msg, [callback, title, btnTextArray, params] )	EasyModal.confirm('Sure you want to delete it!',function(res){EasyModal.alert('You choice :'+res);},"User Title",['User Close Button','User OK Button'],{size: 'modal-lg',backdrop: 'static'});})})

Demo

Demo

Demo

End

Email:inthinkcolor@gmail.com

http://www.easyproject.cn

Donation/捐助:


支付宝/微信/QQ/云闪付/PayPal 扫码支付
支付宝/微信/QQ/云闪付/PayPal

我们相信,每个人的点滴贡献,都将是推动产生更多、更好免费开源产品的一大步。

感谢慷慨捐助,以支持服务器运行和鼓励更多社区成员。

We believe that the contribution of each bit by bit, will be driven to produce more and better free and open source products a big step.

Thank you donation to support the server running and encourage more community members.

About

Bootstrap Modal extension plugin. Bootstrap 模态框扩展插件,能提供 `alert`, `confirm`, `prompt`, `modal 自定义` 等功能,简单易用。

Topics

Resources

Stars

2 stars

Watchers

1 watching

Forks

Releases

Sponsor this project

Packages

Used by

Contributors

Languages