当前位置：首页 > 网页特效 > 弹出层

Bootstrap4动态生成模态窗口插件

分类：弹出层日期：2024-05-14 点击(1) 评论(0)

简介

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

```html
<link  href="/path/to/bootstrap.css" rel="stylesheet">
<link  href="/path/to/cropper.css" rel="stylesheet">
 
<script src="/path/to/jquery.js"></script>
<script src="/path/to/bootstrap.js"></script>
<script src="/path/to/cropper.js"></script>
<script src="/path/to/bsModal.js"></script>
```
#####  HTML结构
使用bsModal插件的基本HTML结构如下。

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

<div class="mt-3">
  <img id="cropedImage">
</div>
```
#####  初始化插件
在页面DOM元素加载完毕，通过下面的方法来初始化bsModal插件。

```html
// 基本的模态窗口
$('#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插件的可用配置参数有：

| 参数  |  类型 | 默认值  | 描述  |
| ------------ | ------------ | ------------ | ------------ |
| id| String| exampleModal| 模态窗口的id| 
| title| String| Modal title| 模态窗口的标题| 
| titleLavel| Number| 5| 模态窗口标题的字号，默认为h5| 
| body| Any| ''| 模态窗口的body内容。可以是字符串或html标签 | 
| label| String、null| null| 模态窗口的标题id| 
| lang| String、null| null| 定义使用的语言，默认使用浏览器默认语言| 
| modal| String、null| null| 定义模态窗口的选择器，如果没有设置会创建一个新的模态窗口| 
|  fade| Boolean| true| 打开模态窗口时是否使用渐现效果| 
| close| Boolean| true| 是否显示关闭按钮| 
| backdrop| Boolean| true| 是否显示遮罩层| 
| confirm| Boolean| false| 是否作为确认框显示| 
| okBtnText| String| ''| ok按钮的文字| 
| cancelBtnText| String| ''| 取消按钮的文字| 
| confirmOkText| String| ''| 确认按钮的文字 | 
| confirmCancelText| String| ''| 取消确认按钮的文字| 
| langs	Object| {}| 文字的语言| 
| okBtnColor| String| primary| ok按钮的颜色| 
| cancelBtnColor| String| secondary| 取消按钮的颜色| 
| onOpen| Function| null| 打开模态窗口时的回调函数| 
| onClose| Function| null| 关闭模态窗口时的回调函数| 
| onOk| Function| null| 点击ok按钮后的回调函数| 
| onCancel| Function| null| 点击取消按钮后的回调函数| 
图片剪裁模态窗口的可用配置参数有：

| 参数  | 类型  | 默认值  | 描述  |
| ------------ | ------------ | ------------ | ------------ |
|id|String|exampleModalCropper|模态窗口的id|
|confirm|Boolean|true|是否使用确认框|
|src|String|null|剪裁图片的地址，如果没有设置，则是上传模式，否则指定的图片将被剪裁|
|imgId|String|exampleImage|剪裁图片的id|
|cropper|Object|exampleImage|Cropper.js 的参数||
|maxWidth|Number、null|null|剪裁图片的最大宽度|
|action|String、null|''|上传图片的地址|
|method|String|post|post或get|
|fileName|String|file|上传图片input的name属性|
|data|Object|{}|定义上传的data|
|uploadConfig|Object|null|该对象可以定义2个属性：allowTypes：默认为['image/jpeg', 'image/png']，指定上传图片的类型，和maxSize：默认值为5242880，指定上传图片的最大尺寸。|
|success|Function|null|上传成功后的回调函数|
|error|Function|null|上传失败后的回调函数|
|axios|Function|null|是否ajax使用的是axios|
|axiosOriginalData|Boolean|false|axios 成功回调返回的是res还是res.data|
|onUpload|Function|null|upload的回调函数|
|onUploadError|Function|null|uploadError的回调函数|
|onCropper|Function|null|u图片剪裁后的回调函数|

web299.com

Bootstrap4动态生成模态窗口插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果