How to achieve mask layer effect in Bootstrap? (code example)

The following article will introduce to you how to Bootstrap achieve the mask layer effect. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Recommended related tutorials: "bootstrap Tutorial"

The renderings are as follows:

1. Click the open mask layer button

2. Pop up a hidden p

Source code download address: http://download.csdn.net/detail/u014175572/9564824

The implementation code is as follows:

nbsp;html>

 
	
		<meta>
		<meta>
		<meta>
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>遮罩层DEM</title>
		<!-- Bootstrap -->
		<link>
		<link>
		<!-- jQuery (necessary for Bootstrap&#39;s JavaScript plugins) -->
		<script></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script></script>
 
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn&#39;t work if you view the page via file:// -->
		<!--[if lt IE 9]>
	      <script src="js/adaptIE/html5shiv.min.js"></script>
	      <script src="js/adaptIE/respond.min.js"></script>
	    <![endif]-->
 
		<style>
 
		</style>
	
 
	
		<div>
			<h2 id="遮罩层DEMO">遮罩层DEMO</h2>
			<!-- 按钮触发模态框 -->
			<button>
   			打开遮罩层
		</button>
 
			<!-- 模态框（Modal） -->
			<div>
				<div>
					<div>
						<div>
							<button>
                  ×
            </button>
							<h4>
              	遮罩层标题
            </h4>
						</div>
						<div>
							在这里添加一些文本
						</div>
						<div>
							<button>关闭
            </button>
							<button>
               提交更改
            </button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal -->
			</div>
	
 
<p>Code explanation: </p>
<ul class="list" style="font-family:Verdana,sans-serif; font-size:15px; line-height:22.5px"> <li>To use a modal window, you need to have some kind of trigger. You can use buttons or links. Here we are using buttons. </li>
<li>If you look carefully at the code above, you will find that in the <button> tag, data-target="#myModal" is the target of the modal you want to load on the page. You can create multiple modals on the page and then create different triggers for each modal. Now, obviously, you can't load multiple modules at the same time, but you can create multiple modules on the page that load at different times. </button>
</li>
<li>You need to pay attention to two points in the modal box: <ul class="list" >
<li>The first is .modal, which is used to identify the content of <p> as a modal box. </p>
</li>
<li>The second is .fade class. When the modal is toggled, it causes the content to fade in and out. </li>
</ul>
</li>
<li>aria-labelledby="myModalLabel", this attribute refers to the title of the modal box. </li>
<li>Attribute aria-hidden="true" is used to keep the modal window invisible until the trigger is fired (such as clicking on the relevant button). </li>
<li><p class="modal-header">, modal-header is a class that defines styles for the header of modal windows. </p></li>
<li>class="close", close is a CSS class used to style the close button of a modal window. </li>
<li>data-dismiss="modal" is a custom HTML5 data attribute. Here it is used to close the modal window. </li>
<li>class="modal-body" is a CSS class of Bootstrap CSS, used to set styles for the body of modal windows. </li>
<li>class="modal-footer" is a CSS class of Bootstrap CSS, used to set styles for the bottom of modal windows. </li>
<li>data-toggle="modal", HTML5 custom data attribute data-toggle is used to open a modal window. </li>
</ul>
<p>For more programming-related knowledge, please visit: <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程教学">Programming Teaching</a>! ! </p>
</div>

The above is the detailed content of How to achieve mask layer effect in Bootstrap? (code example). For more information, please follow other related articles on the PHP Chinese website!