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

Bootstrap模态窗口扩展jquery插件

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

简介

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

```html
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-modal-bs3patch.css" rel="stylesheet" />
<link href="css/bootstrap-modal.css" rel="stylesheet" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-modalmanager.js"></script>
<script src="js/bootstrap-modal.js"></script>
```
#####  HTML结构
```html
<div id="responsive" class="modal fade" tabindex="-1" data-width="760" style="display: none;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 class="modal-title">Responsive</h4>
  </div>
  <div class="modal-body">
    <div class="row">
      <div class="col-md-6">
        <h4>Some Input</h4>
        <p><input class="form-control" type="text"></p>
        <p><input class="form-control" type="text"></p>
        <p><input class="form-control" type="text"></p>
        <p><input class="form-control" type="text"></p>
        <p><input class="form-control" type="text"></p>
        <p><input class="form-control" type="text"></p>
        <p><input class="form-control" type="text"></p>
      </div>
      <div class="col-md-6">
        <h4>Some More Input</h4>
        <p><input class="form-control" type="text"></p>
        <p><input class="form-control" type="text"></p>
        <p><input class="form-control" type="text"></p>
        <p><input class="form-control" type="text"></p>
        <p><input class="form-control" type="text"></p>
        <p><input class="form-control" type="text"></p>
        <p><input class="form-control" type="text"></p>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>
```
通过按钮打开模态窗口。

```html
<button class="demo btn btn-primary btn-lg" data-toggle="modal" href="#responsive">View Demo</button>
```

web299.com

Bootstrap模态窗口扩展jquery插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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