Bootstrap4动态生成模态窗口插件

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

安装

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

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

使用方法

在页面中引入下面的css和js文件。

<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结构如下。

<button type="button" class="btn btn-primary" id="exampleBtn">
  打开模态窗口
</button>

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

初始化插件

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

// 基本的模态窗口
$('#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);
  }
});
                

配置参数

bsModal插件的可用配置参数有：

图片剪裁模态窗口的可用配置参数有：

该Bootstrap4动态生成模态窗口插件的github网址为：https://github.com/ycs77/jquery-plugin-bsModal