Bootsrap学习之模态窗口

最新推荐文章于 2022-01-03 01:29:10 发布

叶大师2018

最新推荐文章于 2022-01-03 01:29:10 发布

阅读量666

点赞数

分类专栏： MyBatis

本文链接：https://blog.csdn.net/ganmaotong/article/details/83508893

版权

MyBatis 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

模态窗口在特定时间内用程序强制用户交互。在大部分情况下，它们打开并阻止主窗口的访问，直到模态得以处理。

在Bootstrap中，有两种方法可以切换模态框（Modal）插件的隐藏内容：

通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：

$('#identifier').modal(options)

示例一：一个静态的模态窗口实例，如下面的实例所示：

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 响应式的导航栏</title>
	<link rel="stylesheet" href="../../dist/css/bootstrap.min.css">  
	<script src="../../jquery/jquery.min.js"></script>
	<script src="../../dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <h2>创建模态框（Modal）</h2>
    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	   开始演示模态框
    </button>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
		<div class="modal-content">
		  <div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
			</button>
			<h4 class="modal-title" id="myModalLabel">
				模态框（Modal）标题
			</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><!-- /.modal-content -->
	  </div><!-- /.modal -->
    </div>

  </body>
</html>

在 <button> 标签中，data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。
class="modal fade" .modal，用来把 <div> 的内容识别为模态框； .fade，当模态框被切换时，它会引起内容淡入淡出。
aria-labelledby="myModalLabel"，该属性引用模态框的标题。
aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）
class="modal-dialog" 设置模态窗口的宽度
class="modal-content" 定义模态窗口内容区域，设置模态窗口的背景颜色
class="modal-header" 是为模态窗口的头部定义样式的类
class="modal-title" 模态窗口的标题
class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。

一些可与 modal() 一起使用的有用的方法：

toggle：手动切换模态框，它在模态实际显示或隐藏之前返回处理程序

show：手动打开模态窗口

hide：手动隐藏模态窗口

以下时模态框中要用到事件，这些事件可在函数中当钩子使用：

show.bs.modal：在调用 show 方法后触发。

shown.bs.modal：当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。

hide.bs.modal：当调用 hide 实例方法时触发。

hidden.bs.modal：当模态框完全对用户隐藏时触发。

示例二：加载完成后2秒自动显示模态窗口，关闭模态窗口时弹出提示：

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 响应式的导航栏</title>
	<link rel="stylesheet" href="../../dist/css/bootstrap.min.css">  
	<script src="../../jquery/jquery.min.js"></script>
	<script src="../../dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <h2>web加载后自动显示模态框（Modal）</h2>
    <div class="modal fade" id="myModal" tabindex="-1">
	  <div class="modal-dialog">
		<div class="modal-content">
		  <div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
			</button>
			<h4 class="modal-title" id="myModalLabel">
				模态框（Modal）标题
			</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><!-- /.modal-content -->
	  </div><!-- /.modal -->
    </div>
    <script type="text/javascript">
      $(document).ready(function(){
        function show_modal() {
          $('#myModal').modal('show');
        }  
        window.setTimeout(show_modal, 2000);    
      })      
    </script>
    <script>
      $(function() {
        $('#myModal').on('hide.bs.modal',
          function() {
            alert('嘿，我听说您喜欢模态框...');
        })
      });
</script>

  </body>
</html>

模态窗口大小

模态窗口有3种尺寸：小、中和大，默认为中。在modal-dialog容器上添加.modal-lg和.modal-sm类可以将尺寸分别设置为大和小。

更改模态窗口布局

在模态窗口中可以使用Bootstrap网格系统调整窗口内部布局，所需要做的就是在.modal-body 中添加.container-fluid类。

示例三：

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 响应式的导航栏</title>
	<link rel="stylesheet" href="../../dist/css/bootstrap.min.css">  
	<script src="../../jquery/jquery.min.js"></script>
	<script src="../../dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <h2>创建模态框（Modal）</h2>
    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	   开始演示模态框
    </button>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog modal-sm">
		<div class="modal-content">
		  <div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
			</button>
			<h4 class="modal-title" id="myModalLabel">
				模态框（Modal）标题
			</h4>
		  </div>
		  <div class="modal-body">
		    <div class="container-fluid">
		      <div class="row">
		        <p class="col-md-3">这是四列的模态窗口</p>
		        <p class="col-md-3">每个段落都在不同的列中</p>
		        <p class="col-md-3">第三列</p>
		        <p class="col-md-3">第四列</p>
		      </div>
		    </div>
		  </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><!-- /.modal-content -->
	  </div><!-- /.modal -->
    </div>

  </body>
</html>