jquery+bootstrap4(iModal)弹出框插件

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);
    },
  });
}
演示效果图均和网站一模一样,如有不同,全额退款!
建站奇 » jquery+bootstrap4(iModal)弹出框插件
在线客服
在线客服
热线电话
QQ客服

专业的Ecms模板制作团队品牌,提供优质网站模板、网站开发制作服务。

模板下载 帝国教程