Skip to main content
1 de 2
harifo
  • 1.2k
  • 8
  • 25

Eliminar bloqueo de fondo de modal en Bootstrap 4

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.

harifo
  • 1.2k
  • 8
  • 25