ブートストラップ4つのモーダルを持つ作業バージョン。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<!-- START BUTTON for MODAL1 xyz !-->
<button type="button" class="btn btn-primary rounded-0" data-toggle="modal" data-target="#modal1">
Open modal1
</button>
<!-- START BUTTON for MODAL1 xyz !-->
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
<!-- ▒ modal1 ▒▒▒▒▒▒▒▒▒▒▒▒ !-->
<!-- ░░░░░░░░░░░░░░░░░░░░░ !-->
<!-- ░░░░░░░░░▒▒▒▒▒░▒▒▒▒▒░ !-->
<!-- START modal1 xyz !-->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" aria-labelledby="modal1Label" aria-hidden="true">
<!-- START MODAL-DIALOG xyz !-->
<div class="modal-dialog modal-lg" role="document">
<!-- START MODAL-CONTENT xyz !-->
<div class="modal-content">
<!-- START MODAL-HEADER xyz !-->
<div class="modal-header">
<!-- START MODAL-TITTLE xyz !-->
<h5 class="modal-title" id="modal1Label">modal1 title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- END MODAL-TITTLE xyz !-->
</div>
<!-- END MODAL-HEADER xyz !-->
<!-- START MODAL-BODY xyz !-->
<div class="modal-body px-3">
modal1 body - Switch
</div>
<!-- END MODAL-BODY xyz !-->
<!-- START MODAL-FOOTER xyz !-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="btn-modal1-save-changes">Save changes</button>
</div>
<!-- END MODAL-FOOTER xyz !-->
</div>
<!-- END MODAL-CONTENT xyz !-->
</div>
<!-- END MODAL-DIALOG xyz !-->
</div>
<!-- END modal1 xyz !-->
<!-- ▒ modal1 ▒▒▒▒▒▒▒▒▒▒▒▒ !-->
<!-- ░░░░░░░░░░░░░░░░░░░░░ !-->
<!-- ░░░░░░░░░▒▒▒▒▒░▒▒▒▒▒░ !-->
<!-- jQuery first, then Popper, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script>
// Capture modal shown event
$(document).on('shown.bs.modal', '#modal1', function() {
console.log('shown.bs.modal Shown Event for #modal1 fired.');
alert('shown.bs.modal Shown Event for #modal1 fired.');
});
// Capture modal hidden event
$(document).on('hidden.bs.modal', '#modal1', function() {
console.log('hidden.bs.modal Hidden Event for #modal1 fired.');
alert('hidden.bs.modal Hidden Event for #modal1 fired.');
});
// Capture btn-modal1-save-changes click event
$(document).on('click', '#btn-modal1-save-changes', function (e) {
alert('btn-modal1-save-changes Click Event for #modal1 fired.');
// Hide modal
$('#modal1').modal('hide');
});
</script>
</body>
</html>
うん、しかし、私は.focusにオープン '他の-page'を(したい) – Opsional