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）弹出框插件

admin

分享到：

admin

相关推荐

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