Bootstrap4动态生成模态窗口插件 A Dynamic Bootstrap 4 Modal Manager

Basic modal:

$('#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');
  }
});

Confirm modal:

$('#confirmBtn').bsModal({
  id: 'bsModalConfirm',
  title: 'Title',
  body: 'Confirm......',
  confirm: true,
  onOpen: function () {
    console.log('Open');
  },
  onClose: function () {
    console.log('Close');
  },
  onOk: function () {
    console.log('OK');
  },
  onCancel: function () {
    console.log('Cancel');
  }
});

Crop image:

<button type="button" class="btn btn-primary" id="cropImageBtn">
  Try it
</button>

<div id="cropedImageBox" class="mt-3" style="display: none">
  <img id="cropedImage">
</div>

$('#cropImageBtn').bsModalCropper({
  id: 'bsModalCropper',
  title: 'Crop image',
  src: 'https://yangchenshin77.github.io/jquery-plugin-bsModal/example-picture.jpg',

  // Cropper.js options
  cropper: {
    aspectRatio: 16 / 9
  },

  // On cropper
  onCropper: function (dataURL) {
    $('#cropedImageBox').show();
    $('#cropedImage').attr('src', dataURL);
  }
});

Limit cropped image max width and height:

<button type="button" class="btn btn-primary" id="cropLimitImageBtn">
  Try it
</button>

<div id="cropedLimitImageBox" class="mt-3" style="display: none">
  <img id="cropedLimitImage">
</div>

$('#cropLimitImageBtn').bsModalCropper({
  id: 'bsModalCropper',
  title: 'Crop image',
  src: 'example-picture.jpg',

  // Output image max size box
  maxWidth: 300,
  maxHeight: 300,

  // Cropper.js options
  cropper: {
    aspectRatio: 16 / 9
  },

  // On cropper
  onCropper: function (dataURL) {
    $('#cropedLimitImageBox').show();
    $('#cropedLimitImage').attr('src', dataURL);
  }
});

Upload image and crop image:

<label class="btn btn-primary" id="uploadImgBtn">
  <input type="file" name="upfile" id="upfile" class="d-none">
  Try it
</label>

<div id="cropedUploadImageBox" class="mt-3" style="display: none">
  <img id="cropedUploadImage">
</div>

$('#uploadImgBtn').bsModalCropper({
  id: 'bsModalCropper',
  title: 'Cropper image',

  // Cropper.js options
  cropper: {
    aspectRatio: 16 / 9
  },

  // On cropper
  onCropper: function (dataURL) {
    $('#cropedUploadImageBox').show();
    $('#cropedUploadImage').attr('src', dataURL);
  },

  // // Upload image
  // action: '/url', // Can set your Upload URL
  // success: function (data) {
  //   console.log(data);
  // },
  uploadConfig: {
    maxSize: Math.pow(1024, 2) * 5 // 5M
  },
  onUploadError: function (error) {
    alert(error)
  }
});