Making Bootstrap's modal-fullscreen not quite fullscreen - bootstrap-modal

Question

I needed a way to create fullscreen Bootstrap modals that weren't 'fully' fullscreen, as I felt that this may create the impression of the site having navigated to a new page. The solution seemed to be to rework the existing modal-fullscreen to pull it in a bit at the edges. I couldn't find an existing solution for this.

Answer 1

I had a go at custom CSS for this. Not sure how robust it is but I didn't change a lot from modal-fullscreen.
.modal-almost-fullscreen {
width: 99vw;
max-width: none;
height: 99%;
margin-top: 2px;
margin-bottom: 2px;
}
.modal-almost-fullscreen .modal-content {
height: 99%;
border: 0;
}
.modal-almost-fullscreen .modal-header,
.modal-almost-fullscreen .modal-footer {
border-radius: 0;
}
.modal-almost-fullscreen .modal-body {
overflow-y: auto;
}
#media (max-width: 575.99px) {
.modal-almost-fullscreen-sm-down {
width: 99vw;
max-width: none;
height: 99%;
margin: 0;
}
.modal-almost-fullscreen-sm-down .modal-content {
height: 99%;
border: 0;
border-radius: 0;
}
.modal-almost-fullscreen-sm-down .modal-header,
.modal-almost-fullscreen-sm-down .modal-footer {
border-radius: 0;
}
.modal-almost-fullscreen-sm-down .modal-body {
overflow-y: auto;
}
}
#media (max-width: 767.99px) {
.modal-almost-fullscreen-md-down {
width: 99vw;
max-width: none;
height: 99%;
margin: 0;
}
.modal-almost-fullscreen-md-down .modal-content {
height: 99%;
border: 0;
border-radius: 0;
}
.modal-almost-fullscreen-md-down .modal-header,
.modal-almost-fullscreen-md-down .modal-footer {
border-radius: 0;
}
.modal-almost-fullscreen-md-down .modal-body {
overflow-y: auto;
}
}
#media (max-width: 991.99px) {
.modal-almost-fullscreen-lg-down {
width: 99vw;
max-width: none;
height: 99%;
margin: 0;
}
.modal-almost-fullscreen-lg-down .modal-content {
height: 99%;
border: 0;
border-radius: 0;
}
.modal-almost-fullscreen-lg-down .modal-header,
.modal-almost-fullscreen-lg-down .modal-footer {
border-radius: 0;
}
.modal-almost-fullscreen-lg-down .modal-body {
overflow-y: auto;
}
}
#media (max-width: 1199.99px) {
.modal-almost-fullscreen-xl-down {
width: 99vw;
max-width: none;
height: 99%;
margin: 0;
}
.modal-almost-fullscreen-xl-down .modal-content {
height: 99%;
border: 0;
border-radius: 0;
}
.modal-almost-fullscreen-xl-down .modal-header,
.modal-almost-fullscreen-xl-down .modal-footer {
border-radius: 0;
}
.modal-almost-fullscreen-xl-down .modal-body {
overflow-y: auto;
}
}
#media (max-width: 1399.99px) {
.modal-almost-fullscreen-xxl-down {
width: 99vw;
max-width: none;
height: 99%;
margin: 0;
}
.modal-almost-fullscreen-xxl-down .modal-content {
height: 99%;
border: 0;
border-radius: 0;
}
.modal-almost-fullscreen-xxl-down .modal-header,
.modal-almost-fullscreen-xxl-down .modal-footer {
border-radius: 0;
}
.modal-almost-fullscreen-xxl-down .modal-body {
overflow-y: auto;
}
}
JSFiddle:
https://jsfiddle.net/valoukh/e2karuxf/