Skip to content

Instantly share code, notes, and snippets.

@ngyuki

ngyuki/.bootstrap-modals

Last active October 29, 2018 00:47
Show Gist options
  • Save ngyuki/dd40d9310f7f9241ceda50627bf5ffb1 to your computer and use it in GitHub Desktop.
Save ngyuki/dd40d9310f7f9241ceda50627bf5ffb1 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap でモーダルを多重表示するサンプル
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap でモーダルを多重表示するサンプル</title>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">
Launch demo modal
</button>
<div class="d-flex justify-content-between" style="width: 95%; height: 1000px; background-color: #ddffdd">
<div>A</div>
<div>Z</div>
</div>
<!-- -->
<div class="modal fade" id="modal2" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal">
<span>&times;</span>
</button>
</div>
<div class="modal-body">
<div style="background-color:#ddf; height:1200px"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal3">Show</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal1" tabindex="-1">
<div class="modal-dialog modal-lg" >
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal">
<span>&times;</span>
</button>
</div>
<div class="modal-body">
<div style="background-color:#dfd; height:1500px"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal2">Show</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal3" tabindex="-1">
<div class="modal-dialog modal-sm" >
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal">
<span>&times;</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="./index.js"></script>
</body>
</html>
Raw
index.js
$(() => {
let modals = 0;
let paddingLeft = null;
let paddingRight = null;
$(document.body).on('show.bs.modal', (ev) => {
const zindex = modals++ * 11;
$(ev.target).css('z-index', 1050 + zindex);
setTimeout(() => {
$('.modal-backdrop:last-of-type').css('z-index', 1040 + zindex);
}, 1);
// body のスクロールバーを非表示にしたときに幅が変わらないように同じ幅のパディングが入れられる
// そのパディングのサイズを保存する
paddingLeft = document.body.style.paddingLeft;
paddingRight = document.body.style.paddingRight;
});
$(document.body).on('hidden.bs.modal', function(ev){
if (--modals === 0) {
$(document.body).removeClass('modal-open');
paddingLeft = null;
paddingRight = null;
} else {
$(document.body).addClass('modal-open');
// 保存しておいたパディングを再適用する
if (paddingLeft) {
document.body.style.paddingLeft = paddingLeft;
}
if (paddingRight) {
document.body.style.paddingRight = paddingRight;
}
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment