0

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.

1
  • Estimados por favor su ayuda , necesito que el moda se muestre delante de los demas modal por favor. Commented el 3 abr. 2019 a las 16:55

1 respuesta 1

2

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

4
  • Gracias , una consulta, este código de jquery lo dejas en la pagina donde esta el modal? y el id del modal donde lo asocio al código de jquery? Commented el 3 abr. 2019 a las 17:02
  • Si, lo vas a agregar en la pagina donde tengas el modal, te recomiendo que veas el ejemplo. Saludos. Commented el 3 abr. 2019 a las 17:08
  • Ah, y con respecto a tu otra pregunta, no necesitas mas que agregar el código. No necesitas modificar lo que ya tienes. Commented el 3 abr. 2019 a las 17:12
  • 1
    si ya me di cuenta muchas gracias Commented el 3 abr. 2019 a las 17:15

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.