Bootstrap4-modal
提供：Dev Guides
ブートストラップ4-モーダル
説明
モーダルは、親ウィンドウの上に階層化された子ウィンドウです。 親ウィンドウを離れることなく何らかの相互作用が可能な別のソースからコンテンツを表示します。
基本モーダル
data-target = "#identifier" _または_href = "#identifier" _とともに、ボタンやリンクなどの要素に.modal_クラスと属性_data-toggle = "modal" _を使用して、モーダルを作成します。特定のモーダルをターゲットに切り替えます。
静的モーダルウィンドウの例は、次の例に示されています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class =" container">
<h2>Basic Modal</h2>
<br>
<!-- Button trigger modal -->
<button type = "button" class = "btn btn-info" data-toggle = "modal" data-target = "#exampleModal">Launch Modal</button>
<!-- Modal -->
<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">Modal Header</h5>
<button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
<span aria-hidden = "true">×</span>
</button>
</div>
<div class = "modal-body">
Modal Body
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-danger" data-dismiss = "modal">Close</button>
<button type = "button" class = "btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
グリッド、ツールチップ、ポップオーバーを使用して、垂直方向に中央揃え
.modal-dialog-centered_クラスを.modal-dialog_要素に追加することで、垂直方向にモーダルを作成できます。 .modal-body_クラス内に.container-fluid_クラスを追加して、モーダル内でグリッドシステムを使用します。 link：bootstrap4_tooltips [tooltips]およびlink：bootstrap4_popovers [popovers]を配置するには、_data-toggle = "popover" _および_data-toggle = "tooltip" _属性を追加します。
次の例は、上記の方法の使用法を示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Vertically centered, Using the Grid, Tooltips and Popovers</h2>
<br>
<button type = "button" class = "btn btn-info" data-toggle = "modal"
data-target = "#exampleModalGrid">Open Modal</button>
<!-- Modal -->
<div class = "modal fade" id = "exampleModalGrid" 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">Modal Header</h5>
<button type = "button" class = "close" data-dismiss = "modal"
aria-label = "Close">
<span aria-hidden = "true">×</span>
</button>
</div>
<div class = "modal-body">
<h5>Grid system in a modal</h5>
<div class = "row">
<div class = "col-md-4 bg-primary">class = 'col-md-4'</div>
<div class = "col-md-4 bg-success">class = 'col-md-4'</div>
<div class = "col-md-4 bg-primary">class = 'col-md-4'</div>
</div>
<br>
<div class = "row">
<div class = "col-8 col-sm-6 bg-primary">class = 'col-8 col-sm-6'
</div>
<div class = "col-4 col-sm-6 bg-success">class = 'col-4 col-sm-6'
</div>
</div>
<hr>
<h5>Popover in a modal</h5>
<a href = "#" data-toggle = "popover"
title = "Popover in a modal"
data-content = "Popover content inside modal">Click Me For Popover</a>
<hr>
<h5>Tooltip in a modal</h5>
<a href = "#" data-toggle = "tooltip" title = "finddevguides!">Just Hover!</a>
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-danger" data-dismiss = "modal">Close</button>
<button type = "button" class = "btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
モーダルサイズ
次の例に示すように、小さなモーダルには_.modal-sm_クラスを使用し、大きなモーダルには_.modal-lg_クラスを使用できます-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Modal Size</h2>
<br>
<!-- Large modal -->
<button type = "button" class = "btn btn-info" data-toggle = "modal"
data-target = ".bd-example-modal-lg">Large modal</button>
<div class = "modal fade bd-example-modal-lg" tabindex = "-1"
role ="d ialog" aria-labelledby =" myLargeModalLabel"
aria-hidden = "true">
<div class = "modal-dialog modal-lg">
<div class = "modal-content">
<div class = "modal-header">
<h5 class = "modal-title" id = "exampleModalLabel">Modal Header</h5>
<button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
<span aria-hidden = "true">×</span>
</button>
</div>
<div class = "modal-body">
Large Size Modal
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-danger" data-dismiss = "modal">Close</button>
<button type = "button" class = "btn btn-success">Save</button>
</div>
</div>
</div>
</div>
<!-- Small modal -->
<button type = "button" class = "btn btn-info" data-toggle = "modal"
data-target = ".bd-example-modal-sm">Small modal</button>
<div class = "modal fade bd-example-modal-sm" tabindex = "-1"
role = "dialog" aria-labelledby = "mySmallModalLabel" aria-hidden = "true">
<div class = "modal-dialog modal-sm">
<div class = "modal-content">
<div class = "modal-header">
<h5 class = "modal-title" id = "exampleModalLabel">Modal Header</h5>
<button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
<span aria-hidden = "true">×</span>
</button>
</div>
<div class = "modal-body">
Small Size Modal
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-danger"
data-dismiss = "modal">Close</button>
<button type = "button" class = "btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
さまざまなモーダルコンテンツ
さまざまなコンテンツでモーダルを起動するボタンのグループを持つことができます。 event.relatedTarget（要素の関連ターゲットを返す）プロパティとHTML _data-* _属性を使用して、クリックされたボタンに応じてコンテンツを表示します。
次の例はこれを示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Varying Modal Content</h2>
<br>
<button type = "button" class = "btn btn-info" data-toggle = "modal"
data-target = "#exampleVaryingModal1" data-whatever = "John Doe">
Recipient: John Doe</button>
<button type = "button" class = "btn btn-info" data-toggle = "modal"
data-target = "#exampleVaryingModal1" data-whatever = "Will Smith">
Recipient: Will Smith</button>
<button type = "button" class = "btn btn-info" data-toggle = "modal"
data-target = "#exampleVaryingModal1" data-whatever = "Dwayne Johnson">
Recipient: Dwayne Johnson</button>
<div class = "modal fade" id = "exampleVaryingModal1" 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">New message</h5>
<button type = "button" class = "close" data-dismiss = "modal"
aria-label = "Close">
<span aria-hidden = "true">×</span>
</button>
</div>
<div class = "modal-body">
<form>
<div class = "form-group">
<label for = "recipient-name" class = "col-form-label">
Recipient:</label>
<input type = "text" class = "form-control" id = "recipient-name">
</div>
<div class = "form-group">
<label for = "message-text" class = "col-form-label">Message:</label>
<textarea class = "form-control" id = "message-text"></textarea>
</div>
</form>
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-danger"
data-dismiss = "modal">Close</button>
<button type = "button" class = "btn btn-success">Send</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#exampleVaryingModal1').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)//Button that triggered the modal
var recipient = button.data('whatever')//Extract info from data-* attributes
//We are jquery here to update the modal's content
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
});
</script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
