Пока у меня есть это: codepen
HTML:
<a data-toggle="modal" href="#tallModal" class="btn btn-primary">Wide, Tall Content</a>
<div id="tallModal" class="modal modal-wide fade"> <div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<img src="http://i.imgur.com/ikqKRG4.jpg">
</div>
</div>
<!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal -->
CSS:
.modal-dialog {
height: 100%;
width: 200px;
max-width: 100%;
margin: 0px auto;
overflow-y: auto;
}
@media (min-width: 768px) .modal-dialog {
margin: 0px auto;
}
.modal-body {
padding: 0;
}
Я хочу, чтобы модальное окно переполнялось как по горизонтали, так и по вертикали. Однако у меня есть некоторые проблемы с полосой прокрутки, закрывающей изображение, поэтому мне нужно установить ширину равной ширине изображения + ширине полосы прокрутки. Как этого избежать?
Я не хочу, чтобы изображение масштабировалось, поэтому оно должно быть в div с переполнением, и я также хочу, чтобы ширина модального окна была шириной самого изображения без необходимости указывать ширину изображения.
