欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > Lightbox和对话框 > Bootstrap模态窗口扩展jquery插件

Bootstrap模态窗口扩展jquery插件

Bootstrap模态窗口扩展jquery插件

关键词:模态窗口,bootstrap,bootstrap模态窗口,bootstrap模态框插件,bootstrap模态框,bootstrap对话框,jquery库,duihuakuang

描述:这是一款bootstrap模态窗口扩展插件。它在原有的bootstrap模态窗口的基础上,通过CSS3添加了模态窗口动画,还添加了ajax获取数据功能和其它一些新的功能。

简要教程

这是一款bootstrap模态窗口扩展插件。它在原有的bootstrap模态窗口的基础上,通过CSS3添加了模态窗口动画,还添加了ajax获取数据功能和其它一些新的功能。

使用方法

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

<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结构
<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>
                

通过按钮打开模态窗口。

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

该bootstrap模态窗口扩展插件的github网址为:https://github.com/jschr/bootstrap-modal

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_duihuakuang/9714.html

 在线演示  免费下载
编号:201907240000009714
大小:0.21MB
上传时间:2019-07-24 07:06
素材由用户"xl0301"上传分享。

标签

最新推荐素材

与Bootstrap模态窗口扩展jquery插件相关的素材

.