帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jquery+bootstrap4(iModal)弹出框插件

帝国模板之家 2020-11-06 网页特效 评论

iModal是一款轻量级弹窗插件,基于jQuery和bootstrap4实现,高可用定制的弹窗,可通过ajax内容注入到模态。

使用方法:

1. 加载资源文件

<!-- Bootstrap 4 Stylesheet -->
<link rel="stylesheet" href="bootstrap.min.css" />
<!-- Required JavaScript -->
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
<!-- iModal Plugin -->
<script src="dist/iModal.js"></script>

2. 调用一个最基本的弹框。

iModal();

3. 设置弹窗标题和内容。

iModal({
  title: 'Modal Title Here'
});
$('#iModal .modal-body').html('HTML Content Here');

4. 设置弹窗标题和内容。

iModal({
  title: 'Modal Title Here',
  body: 'Any HTML Content Here'
});

5. 窗口大小参数:“sm”,“lg”或“xl”。

iModal({
  title: 'Modal Title Here',
  size: 'lg'
});

6. 自定义关闭按钮。 默认值:dismiss

iModal({
  title: 'Modal Title Here',
  closeText: 'dismiss'
});

7. 禁用ESC键关闭窗口。

iModal({
  title: 'Modal Title Here',
  keyboard: false
});

8. 启用/禁用模态背景。

iModal({
  title: 'Modal Title Here',
  backdrop: false // true or static
});

9.确定是否显示页面位置(顶部/底部)。

iModal({
  // shows/hides header and footer
  header: true,
  footer: true,
  // primary, secondary, success, warning, danger, or info
  headerClass: "",
  footerClass: ""
});

10. 确定模态是否滚动。 默认值:false。

iModal({
  title: 'Modal Title Here',
  dialogScrollable: false
});

11. 确定模态是否在垂直中心。 默认值:false。

iModal({
  title: 'Modal Title Here',
  dialogCentered: true
});

12. 启用/禁用褪色动画。 默认值:true

iModal({
  title: 'Modal Title Here',
  fade: true
});

13. 自定义背景。

iModal({
  // true or false
  backdrop: true,
  // 'success', 'primary', 'info', 
  // 'warning', 'danger', 'secondary'
  backdropColor: false
});

14. 回调函数。

iModal({
  onShow: function(){},
  onShowed: function(){},
  onHide: function(){},
  onHidden: function(){},
  onHidePrevented: function(){},
});

15. 这个例子展示了如何将AJAX内容注入到模态。

<button type="button" onclick="muFunction();">Button</button>
// JavaScript
function muFunction(){
  $.ajax({
    type: 'POST',
    url: '/url/to',
    beforeSend: function(){
      iModal({title:'My title'});
    },
    success: function(response){
      $("#iModal .modal-body").html(response);
    },
  });
}

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言