模态框

最新推荐文章于 2019-07-31 08:51:13 发布

我思故我在zzzl3

最新推荐文章于 2019-07-31 08:51:13 发布

阅读量108

点赞数

分类专栏： js 文章标签：模态框

本文链接：https://blog.csdn.net/zl_action/article/details/83385021

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.	模态框
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 模态框（Modal）插件方法</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/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" style="display: none;text-align: center;color: green">
				<button type="button" class="close" data-dismiss="modal" 
						aria-hidden="true">×
				</button>
				<h4 class="modal-title" id="myModalLabel">
					模态框（Modal）标题
				</h4>
			</div>
			<div class="modal-body">
				按下 ESC 按钮退出。
			</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-dialog -->
</div><!-- /.modal -->

</body>
</html>

//开启模态框
function toAddPerson(){
		// 开启模态框
          var dialog = $('#myModal').modal({
               backdrop : 'static',
               keyboard : false
           });
           dialog.modal('show');
	}

//在模态框关闭后可以进行一些操作

//定义全局变量控制display样式
	var flag=true;
	var flag2=true;
	$(function(){
		$("#myModal").on('hide.bs.modal',function(){
			if(flag == false){
	         	$(". modal-header").css('display','none');//隐藏
          	 	flag=true;
         	}else {
				$(". modal-header").css('display','block'); //显示

}
			
           })
	})

我思故我在zzzl3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模态框

1. 模态框&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Bootstrap 实例 - 模态框（Modal）插件方法&lt;/title&gt; &lt;link rel="stylesheet" href="h
复制链接

扫一扫