Bootstrap4动态生成模态对话框窗口插件

Bootstrap4动态生成模态对话框窗口插件

bsModal是一款基于Bootstrap4的动态生成模态窗口插件。bsModal可以在模态窗口中使用任何自定义内容,并且可以和cropper.js结合使用,在模态窗口中剪裁图片并上传服务器。

安装
可以通过npm或yarn来安装bsModal插件。

1
2
$ npm install jquery-plugin-bsmodal
$ yarn add jquery-plugin-bsmodal

使用方法
在页面中引入下面的css和js文件。

1
2
3
4
5
6
7
<link  href="/path/to/bootstrap.css" rel="stylesheet"><!-- Bootstrap is required -->
<link  href="/path/to/cropper.css" rel="stylesheet">
 
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<script src="/path/to/bootstrap.js"></script><!-- Bootstrap is required -->
<script src="/path/to/cropper.js"></script><!-- Cropper.js is required -->
<script src="/path/to/bsModal.js"></script>

HTML结构
使用bsModal插件的基本HTML结构如下。

1
2
3
4
5
6
7
8
<button type="button" class="btn btn-primary" id="exampleBtn">
  打开模态窗口
</button>

<!-- 这里显示剪裁后生成的图片 -->
<div class="mt-3">
  <img id="cropedImage">
</div>

初始化插件
在页面DOM元素加载完毕,通过下面的方法来初始化bsModal插件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 基本的模态窗口
$('#basicBtn').bsModal({
  id: 'bsModal',
  title: 'Title',
  body: 'Modal body text......',
  onOpen: function () {
    console.log('Open');
  },
  onClose: function () {
    console.log('Close');
  },
  onOk: function () {
    console.log('OK');
  },
  onCancel: function () {
    console.log('Cancel');
  }
});
 
// 剪裁图片模态窗口
$('#cropImgBtn').bsModalCropper({
  id: 'bsModalCropper',
  title: 'Crop image',
  src: 'example-picture.jpg',
 
  // Cropper.js options
  cropper: {
    aspectRatio: 16 / 9
  },
 
  // On cropper
  onCropper: function (dataURL) {
    $('#cropedImageBox').show();
    $('#cropedImage').attr('src', dataURL);
  }
});
当前内容只有登录了才能查看,如果您已经注册,请登录
4

发表评论