您的位置: 首页  >  文章  >  bootstrap3-Modal 模态窗口

bootstrap3-Modal 模态窗口

分类: 文章 • 2023-03-16 16:15:58

 

模态窗口的使用：

1.触发窗口打开

2.窗口打开后是否可以继续操作页面上的内容

3.关闭窗口

 

 

有2种方式来触发模态窗口的显示

通过data属性

<!-- Button trigger modal 模态框的触发按钮,通过data-toggle="modal" data-target="#myModal"实现与模态框的绑定-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	  Launch  modal by CSS
</button>

 

通过JavaScript调用

<script type="text/javascript">
	function showModal() {
		$("#myModal").modal({
			backdrop: 'static',/*背景变暗，且关闭模态窗体后才能操作页面上的内容*/
		});
	}
</script>

 


bootstrap3-Modal 模态窗口
 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Default buttons from Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"
	rel="stylesheet" media="screen">
<style>
body {
	padding: 50px; /*边距*/
}
</style>
<script type="text/javascript">
	function showModal() {
		$("#myModal").modal({
			backdrop: 'static',/*背景变暗，且关闭模态窗体后才能操作页面上的内容*/
		});
	}
</script>
<!-- HTML5 Shim and Respond.js 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://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<!-- 模态对话框 -->
	
	<!-- 通过Data属性触发模态窗口-->
	<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	  Launch  modal by CSS
	</button>
	
	<!-- 通过javascript触发模态窗口-->
	<button class="btn btn-success btn-lg" onclick="showModal()">
		Launch  modal by js
	</button>
	
	<!-- Modal -->
	<div class="modal fade in" 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 Heading</h4>
	      </div>
	      <div class="modal-body">
	        <h4>Text in a modal</h4>
	        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
	        
	        <h4>Popover in a modal</h4>
	      <p>...</p>
               ...
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary">Save changes</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="../../bootstrap-3.0.0/assets/js/jquery.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

 

相关推荐