anchor01
modal を左から
HTML
Modalを開くためのリンク（aタグ）
<a href="#" class="btn btn-outline-secondary ml-auto" data-toggle="modal" data-target="#exampleModal01" aria-controls="exampleModal01" aria-expanded="false" aria-label="Modal navigation" role="button">MODAL from L</a>
Modal
<div class="modal fade" id="exampleModal01" tabindex="-1" role="dialog" aria-labelledby="exampleModal01Title" aria-hidden="true">
<div class="modal-dialog dialog-left" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModal01Title">Modal title</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">Close</button>
</div>
</div>
</div>
</div>
SCSS
scss(sass) + compassで書いているので、cssについてはブラウザのデベロッパーツール等でご確認ください。
.modal-dialog.dialog-left {
@include size(80%, auto);
margin: 0;
.modal-header, .modal-content, .modal-footer {
border: none;
border-radius: 0;
}
.modal.fade & {
@include transition(transform .3s ease-out);
@include translate(-50px, 0);
}
.modal.show & {
transform: none;
}
}
Sass変数を使用してBootstrap 4をカスタマイズするには、https://getbootstrap.com/docs/4.2/getting-started/theming/このあたりをご確認ください。
anchor02
modal を右から
anchor03
modal 右から、高さ100%
HTML
Modalを開くためのリンク（aタグ）
<a href="#" class="btn btn-outline-secondary ml-auto" data-toggle="modal" data-target="#exampleModal03" aria-controls="exampleModal03" aria-expanded="false" aria-label="Modal navigation" role="button">MODAL from R</a>
Modal
<div class="modal fade modal-right" id="exampleModal03" tabindex="-1" role="dialog" aria-labelledby="exampleModal03Title" aria-hidden="true">
<div class="modal-dialog dialog-height-right" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModal03Title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal 右から（heightは100%）</p>
</div>
<div class="modal-footer justify-content-start">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
SCSS
scss(sass) + compassで書いているので、cssはChromeのDevTools等でご確認ください。
.modal-dialog.dialog-height-right {
@include size(80%, 100%);
margin: 0;
margin-left: auto;
.modal-header, .modal-content, .modal-footer {
border: none;
border-radius: 0;
}
.modal-content {
height: inherit;
}
.modal-right.fade & {
@include transition(transform .3s ease-out);
@include translate(50px, 0);
}
.modal-right.show & {
transform: none;
}
}
anchor04
modal 左から、高さ100%
Modal内にページ内リンク
HTML
Modalを開くためのリンク（aタグ）
<a href="#" class="btn btn-outline-secondary ml-auto" data-toggle="modal" data-target="#exampleModal04" aria-controls="exampleModal04" aria-expanded="false" aria-label="Modal navigation" role="button">MODAL from L</a>
Modal
<div class="modal fade modal-left" id="exampleModal04" tabindex="-1" role="dialog" aria-labelledby="exampleModal04Title" aria-hidden="true">
<div class="modal-dialog dialog-height-left" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModal04Title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#anchor01">anchor01</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#anchor02">anchor02</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#anchor03">anchor03</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#anchor04">anchor04</a>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
SCSS
scss(sass) + compassで書いているので、cssはChromeのDevTools等でご確認ください。
.modal-dialog.dialog-height-left {
@include size(80%, 100%);
margin: 0;
.modal-header, .modal-content, .modal-footer {
border: none;
border-radius: 0;
}
.modal-content {
height: inherit;
}
.modal-left.fade & {
@include transition(transform .3s ease-out);
@include translate(-50px, 0);
}
.modal-left.show & {
transform: none;
}
}
JS
するするスクロール（modalは除外）と、modal内のリンク（クリック）でmodalを閉じる処理
$(function(){
$('a[href^="#"]' + 'a:not([data-toggle="modal"])').click(function() {
var speed = 800;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
$(".modal .nav-link").on('click',function(e){
e.preventDefault();
e.stopPropagation();
location.href = $(this).attr('href');
$('.modal.show').modal('hide');
return false;
});
});
応用