Modal de Bootstrap ocultar no está funcionando. Alerta en otra cosa. pero mi modal no se oculta Añadido bootply. Mi problema es el mismo.

<button class="button primary" id="buy" data-toggle="modal" data-target=".bs-example-modal-sm" style= "text-decoration:none;" type="button">Review and confirm</button>

<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
  <div class="modal-bootstrap-dialog modal-sm">
    <div class="modal-bootstrap-content">
      <div class="modal-bootstrap-body">
        -- content ----
      </div>
    </div>
  </div>
  <div class="modal-bootstrap-footer">
     <button type="submit" class="button primary" data-dismiss="modal">Close</button>
     <button type="submit" class="button primary">Save changes</button>
  </div>
</div>



<script type="text/javascript">
$("#buy").click(function () {
   var a = 4;
   if (a == 5) {
     alert("if");
     $('#myModal').modal('show');
   }
   else {
    alert("else");
    $('#myModal').modal('hide');
   }

});
</script>

bootply

  • verificación de la consola de errores. Si cualquier publicarlo aquí.
  • se le olvidó ; después de alert()
  • .. y tu javascript sólo entre el html
  • y donde está tu <script> etiqueta ?
  • He corregido alerta. En mi interfaz de usuario de alerta está trabajando. El problema es modal no se oculta
  • Añadido bootply. Mismo problema para mí
  • He comprobado el código. Ahora a comparar a == 5. pero siempre es 4. usted puede comprobar esto por qué se hace esta comparación. También usted necesita quitar los datos de destino si desea abrir modal de javascript : <botón class=»botón principal» id=»comprar» data-toggle=»modal» style=»text-decoration:none;» type=»button»>Revisar y confirmar</botón> datos de destino directamente la apertura de la modal. Comprobar si está funcionando.
  • gracias por tu respuesta. Se está trabajando. Amablemente poner esto como respuesta. I ll aceptar
  • aceptar la voluntad de este. Gracias

InformationsquelleAutor Sam | 2014-05-15

12 Comentarios

  1. 28

    Está utilizando tanto la alternancia modal métodos: a través de Javascript y a través de atributos de datos. Así que el clic es la cocción de la modal mostrar como sus datos conjunto de atributos, y su Javascript no afecta a este desencadenador.

    Sólo quitar los atributos de datos e ir con el método de Javascript:

    <button class="button primary" id="buy" style="text-decoration:none;" type="button">Review and confirm</button>
    
    <div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
        <!-- modal contents -->
    </div>
    
    <script type="text/javascript">
    $("#buy").click(function () {
        var a = 4;
        if (a == 5) {
            alert("if");
            $('#myModal').modal('show');
        } else {
            alert("else");
            $('#myModal').modal('hide');
        }
    });
    </script>
    • Tengo un problema ahora que puede ser debido a esto. No pude detectar que en mi entorno dev, pero estamos recibiendo informes que dicen que nuestro modal no se cierra y los campos son eliminados. ¿Tiene usted alguna idea acerca de las circunstancias que la causa de este conflicto? Tenemos tanto javascript como un atributo de datos instruir a la modal para cerrar, pero es sólo un problema en ciertas personas de las máquinas. Es una versión particular de, no sé, bootstrap o jquery, combinado con una cierta versión de Chrome lo tiene usted?
    • es difícil saber lo que está pasando sin la lectura de su código o, al menos, con precisión de la reproducción de las condiciones, usted debe preguntar a su propia pregunta.
  2. 13

    Tuve el mismo problema, probé un montón de cosas, pero la única solución que funcionó para mí es @Tang Chanrith sugerido para eliminar individualmente partes de la moda, pero un poco mejorado para volver a poner y la barra de desplazamiento. Voy a poner mi respuesta si la aceptan respuesta no trabajo para ellos. Lo siento por mi inglés. Espero que me ayudó.

    @Tang Chanrith

    Probar esta función

    function hideModal() {
      $("#myModal").removeClass("in");
      $(".modal-backdrop").remove();
      $("#myModal").hide();
    }

    Mejorado Sollution

    Usted sólo tiene que eliminar una clase de cuerpo y css que genera

    function hideModal() {
      $("#myModal").removeClass("in");
      $(".modal-backdrop").remove();
      $('body').removeClass('modal-open');
      $('body').css('padding-right', '');
      $("#myModal").hide();
    }
    • esto es trabajo de una sola vez, haga clic en.
  3. 6

    Probar esta función

    function hideModal(){
        $("#myModal").removeClass("in");
        $(".modal-backdrop").remove();
        $("#myModal").hide();
    }
    • Me parece que han creado un nuevo problema mediante $(«,modal-telón de fondo»).remove()… mi barra de desplazamiento también desaparece! Necesidad de encontrar otra solución.
    • A mí me funcionó.
    • Se está trabajando para mi final. Gracias
  4. 1

    He comprobado el código.
    Ahora a comparar a == 5. pero siempre es 4. usted puede comprobar esto por qué se hace esta comparación.
    También usted necesita quitar los datos de destino si desea abrir modal de javascript :

    <button class="button primary" id="buy" data-toggle="modal" style="text-decoration:none;" type="button">Review and confirm</button>

    de datos de destino directamente la apertura de la modal.
    Comprobar si está funcionando.

  5. 1

    intente agregar return false como este:

    $("#buy").click(function () { 
      var a = 4;
      if (a == 5) {
        alert("if");
        $('#myModal').modal('show');
      }
      else {
        alert("else");
        $('#myModal').modal('hide');
      }
      return false;
    });
  6. 1

    Tengo la solución de este problema.

    $('#landingpage, body').on('click',function(){
        $( ".action-close" ).trigger( "click" );});
  7. 0

    En el código java script que usted necesita para agregar una línea de código

    $("#savechanges").on("click", function (e) {
            $("#userModal").modal("hide");
            e.stopPropagation(); //This line would take care of it
        });
  8. 0

    Tuve el mismo problema, mi error fue que yo estaba tratando de abrir la ventana un par de veces. Debemos probar que la ventana modal no está abierto antes de intentar abrirlo.

        if (!($("#MyModal").data('bs.modal') || {})._isShown){ 
            $("#MyModal").modal('show');
        }
  9. 0

    He tenido el mismo problema. He probado el JavaScript de forma sugerida en el post, por desgracia, sólo funcionaba la mitad del tiempo. Si me activa mi modal un par de veces, que a los insectos fuera. Como resultado, he creado una obra en torno al uso de CSS:

    /* Hide the back drop*/
    .modal-backdrop.show {
        display: none;
    }
    /* Simulate the backdrop using background color */
    .modal-open .modal {
        background-color: rgba(47, 117, 19, 0.3);
    }
  10. 0

    Estaba abriendo la modal popup cuando hago clic en el enlace el uso de data-toggle=»modal» atributo que fue vinculado con el enlace y tratando de cerrarlo con javascript pero era fracasado cada vez, así que cuando me quite la «data-toggle» y atributo «href» a partir de ese enlace y lo abrió con javascript entonces fue que se cierre correctamente el uso de javascript.

    desde el siguiente par de líneas de código, se puede entender fácilmente

    <a href="#CustomerAdvancedModal" data-toggle="modal" class="classShowAdvancedSearch">Advanced Search</a>

    He cambiado el enlace de arriba para algo este enlace

     <a href="#" class="ebiz-Advanced-Search classShowAdvancedSearch">Advanced Search</a>

    Después de que cuando trato de cerrarlo con javascript, entonces me convierto éxito

    $("#CustomerAdvancedModal").modal('hide');

Dejar respuesta

Please enter your comment!
Please enter your name here