基于bootstrap的移动手机端全屏模态窗口插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

bootstrap-fs-modal是一款基于bootstrap的移动手机端全屏模态窗口插件。原生的bootstrap模态窗口在移动手机端的用户体验不是很好，通过该插件可以大大的提高用户体验。

使用方法

在页面中引入bootstrap相关文件，以及fs-modal.min.css和fs-modal.min.js文件。

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="css/fs-modal.min.css" type="text/css" />
<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>
<script src="path/to/fs-modal.min.js"></script>

HTML结构

你唯一需要添加的HTML代码是出现在移动手机端，模态窗口顶部的导航按钮。除了关闭窗口的按钮之外，都需要通过data-glyphicon属性来指定一个图标。

<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  <button type="button" class="btn btn-default" data-glyphicon="glyphicon-refresh">重新加载数据</button>
  <button type="button" class="btn btn-default btn-primary" data-glyphicon="glyphicon-ok">保存</button>
</div>

一个比较完整的HTML代码应该类似下面的样子。

<!-- 触发模态窗口的按钮 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  触发模态窗口
</button>

<!-- 模态窗口 -->
<div class="modal fade modal-fullscreen" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">模态窗口标题</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

bootstrap-fs-modal移动手机端全屏模态窗口插件的github地址为：https://github.com/keaukraine/bootstrap-fs-modal