0

Estoy empleando la libreria de Bootstrap 5 y lo que quiero es crear 2 ventanas modales pero de diferente tamaño. Por ejemplo, mi primera ventana modal tendra un height: 330px y mi segunda ventana modal un height:200px, y asimismo cambiando el color de background diferente para ambas. ¿Cómo puedo hacer ese cambio? Agradezco mucho el apoyo de la comunidad. Saludos

.modal-content form{
position: relative;
margin-top: 16px; 
min-height: 330px;
background-color: #fff;
overflow: hidden;
}

.modal-content1 form{
position: relative;
margin-top: 16px; 
min-height: 200px;
background-color: #fff;
overflow: hidden;
}
3

1 respuesta 1

0

Dar el tamaño es fácil es crear una nueva clase (.class), darle el tamaño y el color o darle un identificador (#id) y darle los mismos atributos, a continuación el código de ejemplo que solo edite el ejemplo del sitio oficial de Bootstrap:

[https://getbootstrap.com/docs/5.2/components/modal/][1]

[1]: Ejemplo Modal

<div class="col-md-4">
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ejemploModalUno">
                        Boton Uno
                    </button>
                    <button class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#ejemploModalDos">
                        Botón Dos
                    </button>
                    <style>
                        #model-content-uno
                        {
                            height: 330px;
                            background-color: lightcyan;
                        }

                        #model-content-dos
                        {
                            height: 200px;
                            background-color: lightyellow;
                        }
                    </style>

                    <div class="modal fade" id="ejemploModalUno" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content" id="model-content-uno">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5" id="exampleModalLabel">Alerta Modal Uno</h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                Cuerpo del Modal uno by Sergio
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Guardar</button>
                            </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="ejemploModalDos" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content" id="model-content-dos">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5" id="exampleModalLabel">Alerta Modal Dos</h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                Cuerpo del Modal dos by Sergio
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Guardar</button>
                            </div>
                            </div>
                        </div>
                    </div>

                </div>

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.