検索

ホームページ >ウェブフロントエンド >フロントエンドQ&A >ブートストラップモーダルとはどういう意味ですか?

ブートストラップモーダルとはどういう意味ですか?

青灯夜游
青灯夜游オリジナル
2021-11-05 15:22:152849ブラウズ

ブートストラップでは、モーダルは親フォームを覆うサブフォームである「モーダル ボックス」を指します。その目的は、親ウィンドウを離れることなく別のソースからのコンテンツを表示することです。体の。モーダル ボックスを使用すると、ユーザー通知、訪問者との対話、メッセージ アラート、またはカスタマイズされたコンテンツ インタラクションのために、目を引くプロンプトとインタラクションを Web サイトに追加できます。

ブートストラップモーダルとはどういう意味ですか?

このチュートリアルの動作環境: Windows7 システム、bootsrap3.3.7 バージョン、DELL G3 コンピューター

モーダル ボックス (Modal) がオーバーレイされますフォーム上の親サブフォーム上。通常、その目的は、親フォームを離れることなく何らかの対話が可能な別のソースからのコンテンツを表示することです。サブフォームは、情報や対話などを提供します。

Bootstrap ポップアップ モーダル ボックス スタイル

Bootstrap の JavaScript モーダル ボックス プラグインを使用して、目を引くプロンプトやインタラクションを Web サイトに追加し、ユーザーや訪問者に通知します。 、メッセージ アラート、またはカスタマイズされたコンテンツ インタラクション。

モーダル ボックスを閉じます:

  • 右上隅の [x] をクリックします

    ブートストラップモーダルとはどういう意味ですか?

  • 右下隅の閉じるボタンをクリックします

    ブートストラップモーダルとはどういう意味ですか?

  • #マスク レイヤーをクリックします

# 仕組み

    ポップアップ モーダル ボックスは HTML、CSS、JavaScript で構築されており、他のプレゼンテーション要素の上に配置されます。 document を編集し、 イベントからスクロールを削除して、モーダル ボックス自体のコンテンツをスクロールできるようにします。

    • モーダル ボックスの「背景」(灰色の背景領域) をクリックすると、動的モジュール ボックスが自動的に閉じます。

    • Bootstrap は一度に 1 つのモーダル ウィンドウのみをサポートし、重ね合わせによりユーザー エクスペリエンスが低下するため、ネストされたモードはサポートしません。

    • モーダル ボックスは、position:fixed を使用します。これは、プレゼンテーション内の他の要素とは大きく異なります。ポップアップモーダルボックスのHTMLは他の要素との干渉を避けるため、できるだけ最上位に配置してください 特に.modalイベントが別の固定要素にも定義されている場合、問題が発生する可能性があります。

    • position:fixed 属性の影響も受けます モバイル端末でモーダルボックスを使用する場合は注意事項がございます。

    • HTML5 のセマンティック定義によると、autofocusHTML 属性はブートストラップ モーダル ボックスに影響を与えません。同じ効果を実現するには、JavaScript を使用する必要があります。

通常のモーダル ボックス

    .modal: モーダル ボックスの最も外側のコンテナー。

    • .modal-dialog: モーダル ボックス コンテナー。

    • .modal-content: モーダル ボックスのコンテンツを配置し、モーダル ボックスのスタイルを設定します。

    • .modal-header: モーダル ボックスのヘッダー。

    • .modal-title: モーダル ボックスのタイトル。

    • .modal-body: モーダル本文のコンテンツ。

    • .modal-footer: モーダル ボックスのフッター コンテンツ。 

  • <div class="modal fade" id="modal1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">标题</h5>
				<button class="close" data-dismiss="modal">
					<span>&times;</span>
				</button>
			</div>
			<div class="modal-body">
				ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
			</div>
			<div class="modal-footer">
				<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
				<button class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>

<div class="container">
	<div class="row mt-5">
		<div class="col">
			<button class="btn btn-primary" data-toggle="modal" data-target="#modal1">普通的模态框</button>
		</div>
	</div>
</div>

ブートストラップモーダルとはどういう意味ですか?

スクロール バー付きモーダル ボックス

ユーザー ビューポートのビューポート (ポップアップ コンテンツ領域) ) またはデバイスのモーダルが長くなると、ページが自動的にスクロールされます。 

<div class="modal fade" id="modal1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">标题</h5>
				<button class="close" data-dismiss="modal">
					<span>&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p>ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>

			</div>
			<div class="modal-footer">
				<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
				<button class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>
<div class="container">
	<div class="row mt-5">
		<div class="col">
			<button class="btn btn-primary" data-toggle="modal" data-target="#modal1">有滚动条的模态框</button>
		</div>
	</div>
</div>

ブートストラップモーダルとはどういう意味ですか?

垂直中央揃えモーダル

.modal-dialog ダイアログ ボックスに .modal-dialog-centered を垂直中央揃えモードに追加します。 

<!-- 垂直居中的模态框 -->
<div class="modal fade" id="modal2">
	<div class="modal-dialog modal-dialog-centered">	<!-- modal-dialog-centered这个class要加在这里 -->
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">标题</h5>
				<button class="close" data-dismiss="modal">
					<span>&times;</span>
				</button>
			</div>
			<div class="modal-body">
					垂直居中的模态框
			</div>
			<div class="modal-footer">
				<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
				<button class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>
<div class="container">
	<div class="row mt-5">
		<div class="col">
			<button class="btn btn-secondary" data-toggle="modal" data-target="#modal2">垂直居中的模态框</button>
		</div>
	</div>
</div>

ブートストラップモーダルとはどういう意味ですか?

グリッド システムを含むモーダル ボックス

.container-fluid グリッド システムを .modal-body に追加します。ダイナミック ビューポートでグリッド システムをブートラップし、どこでも通常のグリッド システム クラス定義を使用します。 

<!-- 使用栅格系统 -->
<div class="modal fade" id="modal3">
	<div class="modal-dialog modal-dialog-centered">	<!-- modal-dialog-centered这个class要加在这里 -->
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">标题</h5>
				<button class="close" data-dismiss="modal">
					<span>&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-4 bg-info border">第1列</div>
						<div class="col-md-4 bg-info border">第2列</div>
						<div class="col-md-4 bg-info border">第3列</div>
						<div class="col-md-12 bg-info border">第4列</div>
					</div>
					<div class="row">
						<div class="col bg-info border">第1列</div>
						<div class="col bg-info border">第2列</div>
						<div class="col bg-info border">第3列</div>
						<div class="col bg-info border">第4列</div>
					</div>
					<div class="row">
						<div class="col-md-5 bg-info">第1列</div>
						<div class="col-md-4 bg-info ml-auto">第2列</div>
					</div>
					<div class="row mt-3">
						<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12  bg-info border">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
						<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12  bg-info border">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
						<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12  bg-info border">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
						<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12  bg-info border">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
						<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12  bg-info border">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
						<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12  bg-info border">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
				<button class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>
<div class="container">
	<div class="row mt-5">
		<div class="col">
			<button class="btn btn-danger" data-toggle="modal" data-target="#modal3">包含栅格系统的模态框</button>
		</div>
	</div>
</div>

ブートストラップモーダルとはどういう意味ですか?

モーダル ボックスのサイズ

モーダル ボックスのサイズを .modal-dialog に追加します。

classDescriptionモーダル最大幅.modal-xl特大サイズ1140px.modal-lg大サイズ800px#none(デフォルト)デフォルト サイズ500px.modal-sm小さいサイズ300px
<!-- 尺寸大小-超大尺寸 -->
<div class="modal fade bd-example-modal-xl" id="modal5">	<!-- 这里添加.bd-example-modal-xl -->
	<div class="modal-dialog modal-xl">	<!-- 这里添加.modal-xl -->
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">标题</h5>
				<button class="close" data-dismiss="modal">
					<span>&times;</span>
				</button>
			</div>
			<div class="modal-body">
				超大尺寸模态框
			</div>
			<div class="modal-footer">
				<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
				<button class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>
<!-- 尺寸大小-大尺寸 -->
<div class="modal fade bd-example-modal-lg" id="modal6">	<!-- 这里添加.bd-example-modal-lg -->
	<div class="modal-dialog modal-lg">	<!-- 这里添加.modal-lg -->
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">标题</h5>
				<button class="close" data-dismiss="modal">
					<span>&times;</span>
				</button>
			</div>
			<div class="modal-body">
				大尺寸模态框
			</div>
			<div class="modal-footer">
				<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
				<button class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>
<!-- 尺寸大小-小尺寸 -->
<div class="modal fade bd-example-modal-sm" id="modal7">	<!-- 这里添加.bd-example-modal-sm -->
	<div class="modal-dialog modal-sm">	<!-- 这里添加.modal-sm -->
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">标题</h5>
				<button class="close" data-dismiss="modal">
					<span>&times;</span>
				</button>
			</div>
			<div class="modal-body">
				小尺寸模态框
			</div>
			<div class="modal-footer">
				<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
				<button class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>

<div class="container">
	<div class="row mt-5">
		<div class="col">
			<button class="btn btn-info" data-toggle="modal" data-target="#modal5">超大尺寸模态框</button>
			<button class="btn btn-info" data-toggle="modal" data-target="#modal6">大尺寸模态框</button>
			<button class="btn btn-info" data-toggle="modal" data-target="#modal7">小尺寸模态框</button>
		</div>
	</div>
</div>

使用数据属性

data属性，需要添加在button身上。

  • data-backdrop 是否显示遮罩层

  • data-keyboard 按esc是否关闭模态框

  • data-focus 让模态框获取到焦点

  • data-show 初始化时模态框是否显示

<!-- data属性 -->
<div class="modal fade" id="modal8">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">标题</h5>
				<button class="close" data-dismiss="modal">
					<span>&times;</span>
				</button>
			</div>
			<div class="modal-body">
				data属性
			</div>
			<div class="modal-footer">
				<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
				<button class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>
<div class="container">
	<div class="row mt-5">
		<div class="col">
			<button class="btn btn-dark" data-toggle="modal" data-target="#modal8" data-backdrop="true" data-keyboard="false" data-focus="true" data-show="false">data属性</button>
		</div>
	</div>
</div>

JavaScript方法事件

方法：

  • .modal(options)：激活您的内容作为模态，将选项加入到object内。

  • .modal('toggle')：手动切换动态模态框，在动态模态框实际显示或隐藏之前返回给调用者（即在shown.bs.modal或hidden.bs.modal事件发生之前)。

  • .modal('show')：手动打开动态模态框，在动态模态框实际显示之前返回给调用者（即在shown.bs.modal事件发生前)。

  • .modal('hide')：手动隐藏动态模态框，在动态模态框实际隐藏之前返回给调用者（即在hidden.bs.modal事件发生前)。

事件：

  • show.bs.modal：

    当调用show实例方法时，会立即触发该事件。如果是由点击引起的，被点击的元素是可用的，成为Event对象的relatedTarget属性。

  • shown.bs.modal：="normal" data-row-style="normal">

    当模态框对用户来说可见时（需要等待CSS过渡完成），会触发该事件。如果是由点击引起的，被点击的元素是可用的，成为Event对象的relatedTarget属性。

  • hide.bs.modal：当调用hide实例方法时，会立即触发该事件。

  • hidden.bs.modal：

    当模态框对用户来说终于完成隐藏时（需要等待CSS过渡完成），会触发该事件。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Bootstrap弹出模态框样式</title>
</head>
<body>
<!-- 方法与事件 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">标题</h5>
<button class="close" data-dismiss="modal">
<span>&times;</span>
</button>
</div>
<div class="modal-body">
data属性
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row mt-5">
<div class="col">
<button class="btn btn-warning" id="myBtn">方法与事件</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script>
//方法
$(&#39;#myBtn&#39;).click(function(){
$(&#39;#myModal&#39;).modal(&#39;show&#39;);
});
/* $(&#39;#myModal&#39;).modal(&#39;show&#39;);
setTimeout(function(){
$(&#39;#myModal&#39;).modal(&#39;hide&#39;);
},2000); */
//事件
$(&#39;#myModal&#39;).on(&#39;show.bs.modal&#39;, function (e) {
console.log(&#39;显示前&#39;);
});
$(&#39;#myModal&#39;).on(&#39;shown.bs.modal&#39;, function (e) {
console.log(&#39;完全显示了&#39;);
});
$(&#39;#myModal&#39;).on(&#39;hide.bs.modal&#39;, function (e) {
console.log(&#39;隐藏前&#39;);
});
$(&#39;#myModal&#39;).on(&#39;hidden.bs.modal&#39;, function (e) {
console.log(&#39;完全隐藏了&#39;);
});
</script>
</body>
</html>

ブートストラップモーダルとはどういう意味ですか?

推荐学习：《bootstrap使用教程》

以上がブートストラップモーダルとはどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html5 css bootstrap html Object class Event 对象 事件 position viewport
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：開発にはどのようなブートストラップ UI ツールが一般的に使用されますか?次の記事：開発にはどのようなブートストラップ UI ツールが一般的に使用されますか?

関連記事

続きを見る