modal se visualiza por detrás de otro modal

publicado por: Anonymous

tengo un problema con una ventana modal en boostrap
el problema es que son 3 ventanas modales, 2 de las ventanas se muestran correctamente , pero 1 se muestra detrás de la ventana modal principal.

imagen ventana que se muestra bien.
introducir la descripción de la imagen aquí

imagen de ventana que se muestra detrás.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Aca el codigo del modal

<div class="modal fade bd-example-modal-lg" id="modalVerReserva" tabindex="-1" role="dialog" aria-labelledby="modalMantenedorVuelosAgregarTramoLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content modal-lg">
<div class="modal-header bg-primary">
<h5 class="modal-title" id="modalMantenedorVuelosAgregarTramoLabel">DETALLE VUELO</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Cerrar">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body modal-md">
<div class="left container-fluid">
<br>
<div class="container-fluid">
<div class="container-fluid col-sm-3">
<input type="text" id="idVerReservaAjax"class="form-control">
</div>
<button class="btn btn-primary" onclick="verReservaGuiaAjax()">Ver</button>
<div class="container-fluid" id="resultadoReservaGuia">
</div>
</div>
</div>
</div>
</div>
</div>
</div>

y este es el botón para ejecutar el modal

<button type='button' size=1 class='btn btn-default' data-toggle='modal' data-target='#modalVerReserva' data-placement='left' title='Datos Cliente'><span class='glyphicon glyphicon-pencil'></span></button>

Por favor su ayuda.

solución

Tengo algunas aplicaciones que utilizan muchos Modals, y tenia ese mismo problema, mi solucion fue poner este codigo que encontre en una pagina dejo el enlace al final

(function($, window) {
    'use strict';

    var MultiModal = function(element) {
        this.$element = $(element);
        this.modalCount = 0;
    };

    MultiModal.BASE_ZINDEX = 1040;

    MultiModal.prototype.show = function(target) {
        var that = this;
        var $target = $(target);
        var modalIndex = that.modalCount++;

        $target.css('z-index', MultiModal.BASE_ZINDEX + (modalIndex * 20) + 10);

        // Bootstrap triggers the show event at the beginning of the show function and before
        // the modal backdrop element has been created. The timeout here allows the modal
        // show function to complete, after which the modal backdrop will have been created
        // and appended to the DOM.
        window.setTimeout(function() {
            // we only want one backdrop; hide any extras
            if(modalIndex > 0)
                $('.modal-backdrop').not(':first').addClass('hidden');

            that.adjustBackdrop();
        });
    };

    MultiModal.prototype.hidden = function(target) {
        this.modalCount--;

        if(this.modalCount) {
           this.adjustBackdrop();
            // bootstrap removes the modal-open class when a modal is closed; add it back
            $('body').addClass('modal-open');
        }
    };

    MultiModal.prototype.adjustBackdrop = function() {
        var modalIndex = this.modalCount - 1;
        $('.modal-backdrop:first').css('z-index', MultiModal.BASE_ZINDEX + (modalIndex * 20));
    };

    function Plugin(method, target) {
        return this.each(function() {
            var $this = $(this);
            var data = $this.data('multi-modal-plugin');

            if(!data)
                $this.data('multi-modal-plugin', (data = new MultiModal(this)));

            if(method)
                data[method](target);
        });
    }

    $.fn.multiModal = Plugin;
    $.fn.multiModal.Constructor = MultiModal;

    $(document).on('show.bs.modal', function(e) {
        $(document).multiModal('show', e.target);
    });

    $(document).on('hidden.bs.modal', function(e) {
        $(document).multiModal('hidden', e.target);
    });
}(jQuery, window));

Pagina de donde obtuve el código original

Respondido por: Anonymous

Leave a Reply

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