0

Quiero adaptar mi proyecto usando ventanas modales, pero al momento de abrir la modal, esta queda oscura y el footer queda adelante por asi decir, ¿que puede ser?introducir la descripción de la imagen aquí

Este es el código del modal

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
    <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

2 respuestas 2

5

Quedan debajo porque la propiedad del z-index de la capa oscura es mayor a la del modal, y la del footer es mayor a la de todos. Solución rápida, dale un z-index exagerado al modal.

<div id="myModal" class="modal fade" role="dialog" style"z-index: 100000">
<div class="modal-dialog">
<!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
            <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>

La propiedad de z-index especifica el ordenamiento de apilado de los elementos. Mientas mayor sea el z-index del elemento, lo más probable que este se mantenga en pantalla.

https://www.w3schools.com/cssref/pr_pos_z-index.asp

0

Me parece que te faltan dos divs que van a fuera del div de modal-content:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" >
            <div class="model-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="model-body">
                <p>...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" >Save changes</button>
            </div>
        </div>
    </div>
</div>

Tu Respuesta

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

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