<link rel="stylesheet" href="./dist/jquery.plugin.full-modal.min.css" type="text/css"><script src="./dist/jquery.plugin.full-modal.min.js"></script><div class="ibs-full-modal-container" id="modal1">
<div class="ibs-full-modal">
<!--对话框头部-->
<header class="ibs-modal-header">
<h4 class="ibs-modal-title">对话框标题</h4>
<span class="ibs-btn-close">×</span>
</header>
<div class="ibs-modal-body has-header has-footer">
<!--内容放在这里-->
</div>
<!--对话框底部-->
<div class="ibs-modal-footer text-right">
<button class="btn btn-default" id="closeBtn">取消</button>
<button class="btn btn-success">确定</button>
</div>
</div>
</div>应用插件
$('.ibs-full-modal-container').fullModal({
closeWhenClickBackdrop: true,
duration:500,
trigger:'',
beforeOpen: function () {
console.log('beforeOpen was invoked');
},
afterOpen: function () {
console.log('afterOpen was invoked');
},
beforeClose: function () {
console.log('beforeClose was invoked');
},
afterClose: function () {
console.log('afterClose was invoke');
}
});打开对话框
$('#modal1').fullModal('open');关闭对话框
$('#modal1').fullModal('close');closeWhenClickBackdrop:boolean，点击遮罩层时，是否关闭对话框,默认：true,optional.trigger:string,按钮的选择器，点击此按钮会打开对话框,如#my-button,optional.duration:number,动画持续时间,默认:300,optional.beforeOpen:Function,对话框打开之前调用,optional.afterOpen:Function,对话框架打之后调用,optional.beforeClose:Function,对话框关闭之前调用,optional.afterClose:Function,对话框关闭之后调用,optional.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent