He buscado bastante e incluso en la documentación oficial pero no he encontrado solución o tal vez lo interpreto mal, juzgue por favor:
Intento eliminar el bloque de fondo de un modal, o sea, necesito que este sea capaz de interactuar con su fondo y además, al hacer click este modal se actualice(en el fondo, solo necesito el espacio de trabajo) ya que tengo una tabla construida y al hacer click necesito que esta descripción aparezca a un costado, les dejaré un fiddle con el ejemplo:
.modal.left .modal-dialog {
position: fixed;
margin: auto;
width: 320px;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
-o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}
.modal.left .modal-content {
height: 100%;
overflow-y: auto;
}
.modal.left .modal-body {
padding: 15px 15px 80px;
}
.modal.left.fade .modal-dialog {
left: -320px;
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
-o-transition: opacity 0.3s linear, left 0.3s ease-out;
transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.left.fade.show .modal-dialog {
left: 0;
}
/* ----- MODAL STYLE ----- */
.modal-content {
border-radius: 0;
border: none;
}
.modal-header {
border-bottom-color: #eeeeee;
background-color: #fafafa;
}
/* ----- v CAN BE DELETED v ----- */
body {
background-color: #78909c;
}
.demo {
padding-top: 60px;
padding-bottom: 110px;
}
.btn-demo {
margin: 15px;
padding: 10px 15px;
border-radius: 0;
font-size: 16px;
background-color: #ffffff;
}
.btn-demo:focus {
outline: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container demo">
<div class="text-center">
<button type="button" class="btn btn-demo" data-toggle="modal" data-target="#exampleModal">
Left Sidebar Modal
</button>
</div>
<div class="modal left fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false" data-keyboard="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="nav flex-sm-column flex-row">
<a class="nav-item nav-link active" href="#">Home</a>
<a href="#" class="nav-item nav-link">Link</a>
<a href="#" class="nav-item nav-link">Link</a>
<a href="#" class="nav-item nav-link">Link</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- container -->
La idea finalmente, es quitar el backdrop(ya lo hice) y quitar la cssclass del body modal-open(ya lo hice) pero aun así no consigo volver a hacer click en el fondo y se me bloquean los botones, las tablas y los select.
Gracias por su tiempo.
EDIT Añado link a Codepen