[SOLUCIONADO] No se muestra ventana modal bootstrap

javierconesa23 · #1 (**permalink**) 15/10/2015, 04:06

Hola buenas , pues digamos que no se que ocurre ya que he utilizado varios tutoriales para crear una sencilla ventana modal con bootstrap
os muestro un cpodigo de ejemplo.

Código HTML:

Ver original<html lang="es">
 
<head>
    <meta charset="UTF-8">
    <title>Modal</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script src="assets\less\bs-less\modals.less"></script>
</head>
<body>
    <div class="container">
        <a href="#myModal" role="button" class="btn" data-toggle="modal">Iniciar Sesion</a>
                    <div id="myModal" class="modal hide fade">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h3>Titulo del modal</p>
            </div>
            <div class="modal-body">
                <p>Cuerpo del modal</p>
            </div>
            <div class="modal-footer">
                <a href="#" data-dismiss="modal" class="btn">Salir</a>
                <a href="#" class="btn btn-ptrimary">Guardar </a>
            </div>
        </div>
    </div>
 
 
 
<script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    
 
</body>
</html>

Se muestra el boton y eso pero cuando le doy al boton el link de la pagina me cambia , por ejemplo: cuando cargo la pagina el link es este:
http://localhost:82/ini2/neon/modal2.html
y cuando le doy click al boton me aparece esto:
http://localhost:82/ini2/neon/modal2.html#myModal
pero sin ninguna accion
N o soy un entendido pero parece que no cargue alguna libreria y por eso no la muestra , he revidsado en la raiza de la pagina si en las carpetas de bottstrap estaba el modal.js , y no esta lo que si que esta es el mismo archivo compilado en *.less aun que como podeis ver ya lo e incluido en el codigo pero sigue sin funcionar

Espero puedan ayudarme. Gracias de antemano

PD: en el notepad++ el data-dismiss y el aria-hidden me los muestra en rojo como si no reconociera la clase

xfxstudios · #2 (**permalink**) 15/10/2015, 05:20

no se que version de bootstrap usas pero yo la ultima y la tengo configurada asi:

Código PHP:

Ver original//llamadas a los js y css
<script src="js/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" href="app/css/bootstrap.min.css">
 
//boton
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Más Info</button>
 
//modal
 
<!-- Modal -->
<div id="myModalB" 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">Transferencias Bancarias</h4>
      </div>
      <div class="modal-body">
        <p>Usted podrá realizar sus pagos tanto de Afiliación como de pago de mensualidad o renovación de cualquiera de los planes que le ofrecemos</p>
        
       
        <p>Luego de Realizado el pago, por favor notifiquelo al e-mail <b>pagos@xxxxx.com</b> Indicando Sus datos, luego se le enviará un E-mail con el enlace para que continue su registro.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
 
  </div>
</div>

javierconesa23 · #3 (**permalink**) 15/10/2015, 05:47

gracias por tu rapida respuesta.
yo tambien tengo la ultima version las 3.3.5
Solo que cuando la descargue ley algo de archivo compilados en less
bueno:

segun lo que me comentas :

Cita:

//llamadas a los js y css
<script src="js/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" href="app/css/bootstrap.min.css">

"js/jquery-latest.js: este no lo tengo por ninguna carpeta
js/bootstrap.js: este esta bien
app/css/bootstrap.min.css: y este lo he sustituido por "carpeta de misitio/css/bootstrap.mi.css"

tengo en la carpeta assets/js : jquery-1.11.0.min.js
que mientras te respondia lo he sustituido por en tu ejemplo y me ha quedado asi

Código HTML:

Ver original<!-- //llamadas a los js y css -->
    <script src="assets/js/jquery-1.11.0.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
     
   <!--  //boton -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Más Info</button>
     
    <!-- //modal -->
     
    <!-- Modal -->
    <div id="myModalB" 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">Transferencias Bancarias</h4>
          </div>
          <div class="modal-body">
            <p>Usted podrá realizar sus pagos tanto de Afiliación como de pago de mensualidad o renovación de cualquiera de los planes que le ofrecemos</p>
            
           
            <p>Luego de Realizado el pago, por favor notifiquelo al e-mail <b>[email protected]</b> Indicando Sus datos, luego se le enviará un E-mail con el enlace para que continue su registro.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
          </div>
        </div>
     
      </div>
    </div>

pero desgraciadamente el boton no hace ninguna accion

xfxstudios · #4 (**permalink**) 15/10/2015, 06:56

cambia esto:

Código HTML:

Ver original<!--esto-->
<div id="myModalB" class="modal fade" role="dialog">
 
<!--por esto-_>
<div id="myModal" class="modal fade" role="dialog">

recuerda que el modal debe tener el nombre al que apunta el boton, es que me equivioque de boton, asi que el boton esta apuntando a #myModal y en el modal lo tienes como myModalB, en relacion al jquery:

Código HTML:

Ver originalhttp://ajax.googleapis.com/ajax/libs/jquery/latest/jquery.js

en estas paginas te explican mejor como hacer la configuracion del mismo

TEMA 1

TEMA 2

javierconesa23 · #5 (**permalink**) 15/10/2015, 07:32

Guau!! Perfecto!!
no se como se me habia escapado esa "B"
Muchas gracias de verdad por la solucion y tambien por el aporte.