Bootstrap でマスク レイヤー効果を実現するにはどうすればよいですか? (コード例)

次の記事では、Bootstrap でマスク レイヤー効果を実現する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

推奨される関連チュートリアル: 「bootstrap チュートリアル 」

レンダリングは次のとおりです:

1. マスク レイヤーを開くボタンをクリックします

##2. 非表示のレイヤーをポップアップ表示します

ソース コードのダウンロード アドレス: http://download.csdn.net/detail/u014175572/9564824

実装コードは次のとおりです:

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></p> <ul class="list" style="font-family:Verdana,sans-serif; font-size:15px; line-height:22.5px">モーダルウィンドウを使用するには、何らかのトリガーが必要です。ボタンまたはリンクを使用できます。ここではボタンを使用しています。 <li>上記のコードを注意深く見ると、<button> タグ内の data-target="#myModal" が、ページに読み込むモーダルのターゲットであることがわかります。ページ上に複数のモーダルを作成し、モーダルごとに異なるトリガーを作成できます。当然のことですが、複数のモジュールを同時に読み込むことはできませんが、異なる時間に読み込まれる複数のモジュールをページ上に作成することはできます。 <li>モーダル ボックスでは 2 つの点に注意する必要があります: <li><ul class="list" >1 つ目は .modal で、<p> のコンテンツをモーダル ボックスとして識別するために使用されます。 </p>
<li>2 つ目は .fade クラスです。モーダルを切り替えると、コンテンツがフェードインまたはフェードアウトします。 <li>
</ul></li>aria-labeledby="myModalLabel"、この属性はモーダル ボックスのタイトルを参照します。 <li>属性 aria-hidden="true" は、トリガーが起動される (関連するボタンをクリックするなど) までモーダル ウィンドウを非表示にしておくために使用されます。 <li>
<p class="modal-header">、modal-header は、モーダル ウィンドウのヘッダーのスタイルを定義するクラスです。 </p>
<li>class="close"、close は、モーダル ウィンドウの閉じるボタンのスタイルを設定するために使用される CSS クラスです。 <li>data-dismiss="modal" は、カスタム HTML5 データ属性です。ここではモーダルウィンドウを閉じるために使用されます。 <li>class="modal-body" は、Bootstrap CSS の CSS クラスで、モーダル ウィンドウの本体のスタイルを設定するために使用されます。 <li>class="modal-footer" は Bootstrap CSS の CSS クラスで、モーダル ウィンドウの下部のスタイルを設定するために使用されます。 <li>data-toggle="modal"、HTML5 カスタム データ属性 data-toggle は、モーダル ウィンドウを開くために使用されます。 <li></button>
</ul>プログラミング関連の知識について詳しくは、<p>プログラミング教育<a href="https://www.php.cn/course.html" target="_blank" textvalue="编程教学">をご覧ください。 ！ </a></p>
</div>

以上がBootstrap でマスク レイヤー効果を実現するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。