• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

Bootstrap怎么实现遮罩层效果代码展示

武飞扬头像
PHP中文网
帮助44

效果图如下:

 

1、点击打开遮罩层按钮

学新通技术网

2、弹出一个隐藏的p

学新通技术网

源码下载地址:http://download.csdn.net/detail/u014175572/9564824

实现代码如下:

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
		<title>遮罩层DEM</title>
		<!-- Bootstrap -->
		<link href="https://www.swvq.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<link href="https://www.swvq.com/bootstrap/css/index/index.css" rel="stylesheet">
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="https://www.swvq.com/bootstrap/js/jquery-2.1.4.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="https://www.swvq.com/bootstrap/js/bootstrap.min.js"></script>
 
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
	      <script src="https://www.swvq.com/bootstrap/js/adaptIE/html5shiv.min.js"></script>
	      <script src="https://www.swvq.com/bootstrap/js/adaptIE/respond.min.js"></script>
	    <![endif]-->
 
		<style>
 
		</style>
	</head>
 
	<body>
		<div class="container-fluid text-center">
			<h2>遮罩层DEMO</h2>
			<!-- 按钮触发模态框 -->
			<button   data-toggle="modal" data-target="#myModal">
   			打开遮罩层
		</button>
 
			<!-- 模态框(Modal) -->
			<div     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"   data-dismiss="modal" aria-hidden="true">
                  ×
            </button>
							<h4   id="myModalLabel">
              	遮罩层标题
            </h4>
						</div>
						<div class="modal-body">
							在这里添加一些文本
						</div>
						<div class="modal-footer">
							<button type="button"   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" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框,然后为每个模态框创建不同的触发器。现在,很明显,您不能在同一时间加载多个模块,但您可以在页面上创建多个在不同时间进行加载。
  • 在模态框中需要注意两点:
    • 第一是 .modal,用来把 <p> 的内容识别为模态框。
    • 第二是 .fade class。当模态框被切换时,它会引起内容淡入淡出。
  • aria-labelledby="myModalLabel",该属性引用模态框的标题。
  • 属性 aria-hidden="true" 用于保持模态窗口不可见,直到触发器被触发为止(比如点击在相关的按钮上)。
  • <p class="modal-header">,modal-header 是为模态窗口的头部定义样式的类。
  • class="close",close 是一个 CSS class,用于为模态窗口的关闭按钮设置样式。
  • data-dismiss="modal",是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
  • class="modal-body",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的主体设置样式。
  • class="modal-footer",是 Bootstrap CSS 的一个 CSS class,用于为模态窗口的底部设置样式。
  • data-toggle="modal",HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanfiehf
系列文章
更多 icon
同类精品
更多 icon
继续加载