bootstrap4.css
.alert-dismissible .close {
position: absolute;
top: 0;
right: 0;
padding: 0.75rem 1.25rem;
color: inherit;
}
bootstrap4.css
.close {
float: right;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5;
}
bootstrap4.css
.close:hover {
color: #000;
text-decoration: none;
}
bootstrap4.css
.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
opacity: .75;
}
bootstrap4.css
button.close {
padding: 0;
background-color: transparent;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
bootstrap4.css
a.close.disabled {
pointer-events: none;
}
bootstrap4.css
.modal-header .close {
padding: 1rem 1rem;
margin: -1rem -1rem -1rem auto;
}
■アラート:alert:コンポーネント:アラートを閉じるボタンで、アラート表示を消す
右側の「×」マークをクリックするとアラートが閉じます
<div class="alert alert-warning alert-dismissible fade show" role="alert">
右側の「×」マークをクリックするとアラートが閉じます
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
■モーダル:modal:モーダル 表示ボタン、外枠(非表示)、本体、コンテンツ、閉じるボタンの5点セット
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
モーダルの本文が入ります。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
■モーダル:modal:モーダルのアニメーション設定 fade
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
モーダルの本文が入ります。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
■モーダル:modal:垂直方向中央に配置するモーダル
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<!-- モーダルの×ボタン -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
モーダルの本文が入ります。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
<style>
.row>.col, .row>[class^=col-] {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
background-color: rgba(0, 0, 0, .1);
border: 1px solid #aaa;
}
</style>
■モーダル:modal:グリッドレイアウトを使用したモーダル
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4 ml-auto">col-md-4、ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">col-md-3、ml-auto</div>
<div class="col-md-2 ml-auto">col-md-2、ml-auto</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
■モーダル:modal:長いコンテンツのモーダル
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal">モーダルボタン</button>
<!-- モーダルウィンドウ外枠 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- モーダルのダイアログ本体 -->
<div class="modal-dialog" role="document">
<!-- モーダルのコンテンツ部分 -->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
<p>モーダルに表示する文章</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
</div>
■モーダル:modal:大きなサイズのモーダル サイズのオプション modal-lg
<div class="container">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#largeModal">モーダルボタン</button>
<!-- モーダル -->
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" aria-hidden="true">
<!-- モーダルのダイアログ本体 -->
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="largeModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">モーダルの本文が入ります。</div>
<!-- モーダルのフッター -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
■モーダル:modal:小さなサイズのモーダル modal-sm
<!-- 切替ボタン -->
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#smallModal">モーダルボタン(modal-sm)</button>
<!-- モーダル -->
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
<!-- モーダルのダイアログ本体 -->
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="smallModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">モーダルの本文が入ります。</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
■モーダル:modal:モーダルのJavaScript使用
<div class="container">
<p class="text-center"><button type="button" class="btn btn-primary">モーダルボタン</button></p>
<!-- モーダル -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- モーダルのダイアログ本体 -->
<div class="modal-dialog" role="document">
<!-- モーダルのコンテンツ部分 -->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body">モーダルの本文が入ります。</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
<button type="button" class="btn btn-primary">変更を保存</button>
</div>
</div>
</div>
</div>
</div>
<script>
$('.btn').click(function(){
$('#myModal').modal('show');
});
</script>
■モーダル:modal:モーダルを閉じるときにメッセージを出す:JavaScript使用