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

Bootstrap4 多步骤向导模态窗口插件

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

简介

在页面中引入下面的文件。

```html
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/MultiStep.min.css">
<link rel="stylesheet" type="text/css" href="./css/MultiStep-theme.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/MultiStep.min.js"></script>
```
#####  HTML结构
```html
<div class="multi-step"></div>
```
#####  初始化插件
```html
$(document).ready(function() {
    $('.multi-step').MultiStep([options]);
});
```
#####  配置参数
- data[]：用于创建步骤的数据，是一个json数组。
- final：最后一步结束的提示信息，默认为：Are you sure you want to confirm?
- finalLabel：最后一步的label，默认为Complete。
- title：模态窗口的标题，默认无。
- modalSize：模态窗口的尺寸。可选有：sm、md、lg、xl。默认为md。
- prevText：向后一步按钮的文案。默认为Previous。
- nextText：向前一步按钮的文案。默认为Next。
- skipText：skip按钮的文案。默认为Skip。
- finishText：结束按钮的文案。默认为Finish。
- $(..).MultiStep('destroy')：销毁模态窗口的回调函数。
- onClose($elem)：模态窗口关闭时的回调函数。
- onDestroy()：模态窗口销毁时的回调函数。

web299.com

Bootstrap4 多步骤向导模态窗口插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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