モーダルs
BootstrapのJavaScriptモーダルプラグインを使用して、ライトボックス、ユーザー通知、または完全にカスタムコンテンツのダイアログをサイトに追加します。
例
モーダルコンポーネント
以下は_static_モーダルの例です(その position
と display
は上書きされています)。モーダルヘッダ、モーダルボディ( padding
に必要)、モーダルフッター(オプション)が含まれています。可能であれば、モーダルヘッダーに却下アクションを含めるか、別の明示的な却下アクションを提供することをお勧めします。
ライブデモ
下のボタンをクリックして、動作するモーダルデモを切り替えます。 ページの上から下にスライドしてフェードインします。
長いコンテンツをスクロールする
モーダルがユーザーのビューポートまたはデバイスに対して長くなりすぎると、ページ自体とは無関係にスクロールします。 以下のデモを試して、意味を確認してください。
ログインモーダル
<button class="btn btn-round" data-toggle="modal" data-target="#loginModal">
Login<i class="material-icons">assignment</i>
</button>
<div class="modal fade" id="loginModal" tabindex="-1" role="">
<div class="modal-dialog modal-login" role="document">
<div class="modal-content">
<div class="card card-signup card-plain">
<div class="modal-header">
<div class="card-header card-header-primary text-center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="material-icons">clear</i>
</button>
<h4 class="card-title">Log in</h4>
<div class="social-line">
<a href="#pablo" class="btn btn-just-icon btn-link btn-white">
<i class="fa fa-facebook-square"></i>
</a>
<a href="#pablo" class="btn btn-just-icon btn-link btn-white">
<i class="fa fa-twitter"></i>
<div class="ripple-container"></div></a>
<a href="#pablo" class="btn btn-just-icon btn-link btn-white">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
</div>
<div class="modal-body">
<form class="form" method="" action="">
<p class="description text-center">Or Be Classical</p>
<div class="card-body">
<div class="form-group bmd-form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="material-icons">face</i></div>
</div>
<input type="text" class="form-control" placeholder="First Name...">
</div>
</div>
<div class="form-group bmd-form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="material-icons">email</i></div>
</div>
<input type="text" class="form-control" placeholder="Email...">
</div>
</div>
<div class="form-group bmd-form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="material-icons">lock_outline</i></div>
</div>
<input type="password" placeholder="Password..." class="form-control">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer justify-content-center">
<a href="#pablo" class="btn btn-primary btn-link btn-wd btn-lg">Get Started</a>
</div>
</div>
</div>
</div>
</div>
申し込みモード
<button class="btn btn-round" data-toggle="modal" data-target="#signupModal">
<i class="material-icons">assignment</i>
SignUp
</button>
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-signup" role="document">
<div class="modal-content">
<div class="card card-signup card-plain">
<div class="modal-header">
<h5 class="modal-title card-title">Register</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="material-icons">clear</i>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-5 ml-auto">
<div class="info info-horizontal">
<div class="icon icon-rose">
<i class="material-icons">timeline</i>
</div>
<div class="description">
<h4 class="info-title">Marketing</h4>
<p class="description">
We've created the marketing campaign of the website. It was a very interesting collaboration.
</p>
</div>
</div>
<div class="info info-horizontal">
<div class="icon icon-primary">
<i class="material-icons">code</i>
</div>
<div class="description">
<h4 class="info-title">Fully Coded in HTML5</h4>
<p class="description">
We've developed the website with HTML5 and CSS3. The client has access to the code using GitHub.
</p>
</div>
</div>
<div class="info info-horizontal">
<div class="icon icon-info">
<i class="material-icons">group</i>
</div>
<div class="description">
<h4 class="info-title">Built Audience</h4>
<p class="description">
There is also a Fully Customizable CMS Admin Dashboard for this product.
</p>
</div>
</div>
</div>
<div class="col-md-5 mr-auto">
<div class="social text-center">
<button class="btn btn-just-icon btn-round btn-twitter">
<i class="fab fa-twitter"></i>
</button>
<button class="btn btn-just-icon btn-round btn-dribbble">
<i class="fab fa-dribbble"></i>
</button>
<button class="btn btn-just-icon btn-round btn-facebook">
<i class="fab fa-facebook"> </i>
</button>
<h4> or be classical </h4>
</div>
<form class="form" method="" action="">
<div class="card-body">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="material-icons">face</i></div>
</div>
<input type="text" class="form-control" placeholder="First Name...">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="material-icons">email</i></div>
</div>
<input type="text" class="form-control" placeholder="Email...">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="material-icons">lock_outline</i></div>
</div>
<input type="password" placeholder="Password..." class="form-control" />
</div>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" checked>
<span class="form-check-sign">
<span class="check"></span>
</span>
I agree to the <a href="#something">terms and conditions</a>.
</label>
</div>
</div>
<div class="modal-footer justify-content-center">
<a href="#pablo" class="btn btn-primary btn-round">Get Started</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
ツールチップとポップオーバー
Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
YouTubeの動画を埋め込む
YouTube動画をモーダルに埋め込むには、再生を自動的に停止するために、Bootstrapにはない追加のJavaScriptが必要です。詳細については[https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal]を参照してください。
任意サイズ
モーダルは2つのオプションのサイズを持ち、 .modal-dialog
に配置される修飾子クラスを通して利用可能です。これらのサイズは、狭いビューポートで水平スクロールバーを避けるために特定のブレークポイントで開始されます。
使用法
モーダルプラグインは、データ属性またはJavaScriptを介して、あなたの隠しコンテンツをオンデマンドで切り替えます。また、デフォルトのスクロール動作を無効にするために .modal-open
を <body>
に追加し、モーダルの外側をクリックしたときに表示されたモーダルを閉じるためのクリック領域を提供する .modal-backdrop
を生成します。
データ属性による
JavaScriptを書かずにモーダルを有効にします。ボタンのようにコントローラ要素で data-toggle =" modal "
を設定し、特定のモーダルを切り替えるために data-target ="#foo "
または href ="#foo "
を一緒に設定します。
JavaScript経由
1行のJavaScriptで、idが myModal
のモーダルを呼び出します。
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-backdrop=""
.
Name | Type | Default | Description |
---|---|---|---|
backdrop | boolean or the string 'static' |
true | Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. |
keyboard | boolean | true | Closes the modal when escape key is pressed |
focus | boolean | true | Puts the focus on the modal when initialized. |
show | boolean | true | Shows the modal when initialized. |
あなたがより多くの例と特性を見たいと思うならば、公式をチェックしてください Bootstrap Documentation.