Pregunta bootstrap modal no funciona en absoluto


Sé que esta pregunta se ha formulado cientos de veces antes y las he superado, pero no pudieron solucionar mi caso: s

Este es mi código hasta ahora

    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> 
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
    <link href="bootstrap/js/bootstrap.min.js" rel="stylesheet" media="screen">
    <link href="bootstrap/js/bootstrap-modal.js" rel="stylesheet" media="screen">
    <link href="bootstrap/js/bootstrap-transition.js" rel="stylesheet" media="screen">

Y dentro del cuerpo tengo esto:

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"   aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

Tenga en cuenta que uso algunas otras bibliotecas en la sección de cabecera porque tal vez las necesite para Google Map. Intenté eliminarlas pero aún no activé la vista modal.


5
2018-06-17 07:56


origen


Respuestas:


Agregue esta línea al archivo Javascript

  $(document).ready(function() {
    $("#MyModal").modal();
  });

4
2018-06-17 08:55



Tiene todos sus scripts y archivos CSS cargados dentro de una etiqueta de script; saque la etiqueta de script que envuelve el resto.


1
2018-06-17 08:04



Antes de publicar mi solución completa, me gustaría saber si ha inicializado su modal antes de cargarlo. Inicialización: -

$(function(){
$('#myModal').modal({
   show:true,
   backdrop:'static'
});
 //now on button click
  $('#myModal').modal('show');
});

1
2017-12-14 18:53



has usado el cdn o el archivo popper.js  Si no incluye popper.js archivo no podrás ver tus ventanas modales Revisa el siguiente cdn y ponlo debajo jquery.js y bootstrap.js como sigue abajo

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Ahora funcionará al 100% si no tengo otra solución.  Copia el siguiente código y compruébalo

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

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

1
2017-11-11 08:30



¡No debes poner el archivo CSS dentro de la etiqueta!

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> </script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
<link href="bootstrap/js/bootstrap.min.js" rel="stylesheet" media="screen">
<link href="bootstrap/js/bootstrap-modal.js" rel="stylesheet" media="screen">
<link href="bootstrap/js/bootstrap-transition.js" rel="stylesheet" media="screen">

0
2018-06-17 08:08



Está cargando sus scripts incorrectamente (algunos se cargan como hojas de estilo, otros no tienen la etiqueta de script de cierre).

Debería ser :

    <!--STYLESHEETS-->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="style.css">

    <!--SCRIPTS - MAKE SURE THE PATH IS RIGHT FOR THE BOOTSTRAP SCRIPTS-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> </script>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap/js/bootstrap-modal.js"></script>
    <script src="bootstrap/js/bootstrap-transition.js"></script

0
2017-11-21 21:25



Tengo el mismo problema; Después de un largo análisis, encuentro la solución: agregando "style =" display: none; "en div modal. No sé por qué, pero cuando carga la página, el modal está oculto, pero si lo inspecciona con firebug, el modal recupera el menú desplegable Después de mostrar el modal y ocultarlo, el js agrega "style =" display: none; " y el menú desplegable funciona


0
2018-01-05 12:49



Utilice a continuación la biblioteca bootstrap en línea o Descargar desde aquí

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

y pegar este enlace antes bootstrap.js enlazar

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

El modelo Cz Bootstrap no funciona con las ediciones JS anterioresPuede comprobar aquí)

y en bootstrap modelo quitar hide clase desde aqui class="modal fade"

<div id="myModal" class="modal fade" tabindex="-1" role="dialog"   aria-labelledby="myModalLabel" aria-hidden="true">

Esto debería funcionar perfectamente.


0
2017-07-06 03:50