2

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

0

2 respuestas 2

2

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;
}

.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;
}

.modal {
  height: unset !important;
  right: unset !important;
    bottom: unset !important;
}
<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 -->

3
  • Estimado, a tu respuesta solo le tuve que agregar esto y funcionó: $('body').removeClass('modal-open'); Muchas gracias!!!
    – harifo
    Commented el 6 sept. 2019 a las 17:53
  • Perfecto ! que bueno que te haya funcionado con lo que le agregaste también.
    – vicasas
    Commented el 6 sept. 2019 a las 17:57
  • Si, lo que agregue habilita el scroll de la pantalla de fondo
    – harifo
    Commented el 6 sept. 2019 a las 18:29
0

Bootstrap tiene una clase de nombre .modal con las siguientes reglas:

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
}

Las reglas position y width hacen que ocupe todo el contenido de la ventana. Lo que puedes hacer es sobreescribir width dándole un ancho fijo(por ejemplo el mismo ancho que tiene tu sidebar: 320px).

En tu propia hoja de estilos puedes sobreescribir esta regla de la siguiente manera:

.modal {
    width: 320px !important;
}
1
  • Amigo, probé tu respuesta y no funcionó, tengo otros modales además así que afectó el funcionamiento de todo, le puse una clase modal aparte para su descripción y no di con un buen funcionamiento. Entiendo perfecto que la clase modal lo controla, pero se podría realizar solo para 1 modal?
    – harifo
    Commented el 6 sept. 2019 a las 15:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.