Eliminar bloqueo de fondo de modal en Bootstrap 4

publicado por: Anonymous

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:

_x000D_

_x000D_

.modal.left .modal-dialog {_x000D_
	position: fixed;_x000D_
	margin: auto;_x000D_
	width: 320px;_x000D_
	height: 100%;_x000D_
	-webkit-transform: translate3d(0%, 0, 0);_x000D_
	-ms-transform: translate3d(0%, 0, 0);_x000D_
	-o-transform: translate3d(0%, 0, 0);_x000D_
	transform: translate3d(0%, 0, 0);_x000D_
}_x000D_
_x000D_
.modal.left .modal-content {_x000D_
	height: 100%;_x000D_
	overflow-y: auto;_x000D_
}_x000D_
_x000D_
.modal.left .modal-body {_x000D_
	padding: 15px 15px 80px;_x000D_
}_x000D_
_x000D_
.modal.left.fade .modal-dialog {_x000D_
	left: -320px;_x000D_
	-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;_x000D_
	-moz-transition: opacity 0.3s linear, left 0.3s ease-out;_x000D_
	-o-transition: opacity 0.3s linear, left 0.3s ease-out;_x000D_
	transition: opacity 0.3s linear, left 0.3s ease-out;_x000D_
}_x000D_
_x000D_
.modal.left.fade.show .modal-dialog {_x000D_
	left: 0;_x000D_
}_x000D_
_x000D_
/* ----- MODAL STYLE ----- */_x000D_
.modal-content {_x000D_
	border-radius: 0;_x000D_
	border: none;_x000D_
}_x000D_
_x000D_
.modal-header {_x000D_
	border-bottom-color: #eeeeee;_x000D_
	background-color: #fafafa;_x000D_
}_x000D_
_x000D_
/* ----- v CAN BE DELETED v ----- */_x000D_
body {_x000D_
	background-color: #78909c;_x000D_
}_x000D_
_x000D_
.demo {_x000D_
	padding-top: 60px;_x000D_
	padding-bottom: 110px;_x000D_
}_x000D_
_x000D_
.btn-demo {_x000D_
	margin: 15px;_x000D_
	padding: 10px 15px;_x000D_
	border-radius: 0;_x000D_
	font-size: 16px;_x000D_
	background-color: #ffffff;_x000D_
}_x000D_
_x000D_
.btn-demo:focus {_x000D_
	outline: 0;_x000D_
}

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<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">_x000D_
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>_x000D_
<div class="container demo">_x000D_
    <div class="text-center">_x000D_
        <button type="button" class="btn btn-demo" data-toggle="modal" data-target="#exampleModal">_x000D_
            Left Sidebar Modal_x000D_
        </button>_x000D_
    </div>_x000D_
    <div class="modal left fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false" data-keyboard="true">_x000D_
        <div class="modal-dialog" role="document">_x000D_
            <div class="modal-content">_x000D_
                <div class="modal-body">_x000D_
                    <div class="nav flex-sm-column flex-row">_x000D_
                        <a class="nav-item nav-link active" href="#">Home</a>_x000D_
                        <a href="#" class="nav-item nav-link">Link</a>_x000D_
                        <a href="#" class="nav-item nav-link">Link</a>_x000D_
                        <a href="#" class="nav-item nav-link">Link</a>_x000D_
                    </div>_x000D_
                </div>_x000D_
                <div class="modal-footer">_x000D_
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>_x000D_
                </div>_x000D_
            </div>_x000D_
        </div>_x000D_
    </div>_x000D_
</div>_x000D_
<!-- container -->

_x000D_

_x000D_

_x000D_

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

solución

Solo debes sobreescribir la clase modal con los valores correctos para height, left y right. Te dejo a continuación el código editado.

RESPUESTA CORTA

agrega una clase que pise estos valores.

.modal {
  height: unset !important;
  right: unset !important;
  bottom: unset !important;
}

_x000D_

_x000D_

.modal.left .modal-dialog {_x000D_
	position: fixed;_x000D_
	margin: auto;_x000D_
	width: 320px;_x000D_
	height: 100%;_x000D_
	-webkit-transform: translate3d(0%, 0, 0);_x000D_
	-ms-transform: translate3d(0%, 0, 0);_x000D_
	-o-transform: translate3d(0%, 0, 0);_x000D_
	transform: translate3d(0%, 0, 0);_x000D_
}_x000D_
_x000D_
.modal.left .modal-content {_x000D_
	height: 100%;_x000D_
	overflow-y: auto;_x000D_
}_x000D_
_x000D_
.modal.left .modal-body {_x000D_
	padding: 15px 15px 80px;_x000D_
}_x000D_
_x000D_
.modal.left.fade .modal-dialog {_x000D_
	left: -320px;_x000D_
	-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;_x000D_
	-moz-transition: opacity 0.3s linear, left 0.3s ease-out;_x000D_
	-o-transition: opacity 0.3s linear, left 0.3s ease-out;_x000D_
	transition: opacity 0.3s linear, left 0.3s ease-out;_x000D_
}_x000D_
_x000D_
.modal.left.fade.show .modal-dialog {_x000D_
	left: 0;_x000D_
}_x000D_
_x000D_
/* ----- MODAL STYLE ----- */_x000D_
.modal-content {_x000D_
	border-radius: 0;_x000D_
	border: none;_x000D_
}_x000D_
_x000D_
.modal-header {_x000D_
	border-bottom-color: #eeeeee;_x000D_
	background-color: #fafafa;_x000D_
}_x000D_
_x000D_
/* ----- v CAN BE DELETED v ----- */_x000D_
body {_x000D_
	background-color: #78909c;_x000D_
}_x000D_
_x000D_
.demo {_x000D_
	padding-top: 60px;_x000D_
	padding-bottom: 110px;_x000D_
}_x000D_
_x000D_
.btn-demo {_x000D_
	margin: 15px;_x000D_
	padding: 10px 15px;_x000D_
	border-radius: 0;_x000D_
	font-size: 16px;_x000D_
	background-color: #ffffff;_x000D_
}_x000D_
_x000D_
.btn-demo:focus {_x000D_
	outline: 0;_x000D_
}_x000D_
_x000D_
.modal {_x000D_
  height: unset !important;_x000D_
  right: unset !important;_x000D_
    bottom: unset !important;_x000D_
}

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<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">_x000D_
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>_x000D_
<div class="container demo">_x000D_
    <div class="text-center">_x000D_
        <button type="button" class="btn btn-demo" data-toggle="modal" data-target="#exampleModal">_x000D_
            Left Sidebar Modal_x000D_
        </button>_x000D_
    </div>_x000D_
    <div class="modal left fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false" data-keyboard="true">_x000D_
        <div class="modal-dialog" role="document">_x000D_
            <div class="modal-content">_x000D_
                <div class="modal-body">_x000D_
                    <div class="nav flex-sm-column flex-row">_x000D_
                        <a class="nav-item nav-link active" href="#">Home</a>_x000D_
                        <a href="#" class="nav-item nav-link">Link</a>_x000D_
                        <a href="#" class="nav-item nav-link">Link</a>_x000D_
                        <a href="#" class="nav-item nav-link">Link</a>_x000D_
                    </div>_x000D_
                </div>_x000D_
                <div class="modal-footer">_x000D_
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>_x000D_
                </div>_x000D_
            </div>_x000D_
        </div>_x000D_
    </div>_x000D_
</div>_x000D_
<!-- container -->

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *