2

Con un enlace abro una modal

<a id="btn-AddDate" href="#AddDate" data-toggle="modal" class="btn btn-xs btn-success">Añadir Fecha</a>

<div class="modal fade" id="AddDate">
     ...                     
</div>

Al dar al enlace quisiera realizar una acción aparte de abrir la modal. He probado esto:

$("#btn-AddDate").on("click",function() {
  $('#msgError').html("");
});

Pero no funciona. No se me ocurre nada mas ¿Alguna otra idea?

3
  • 1
    ¿A que te refieres con "no funciona"? ¿Da algún tipo de error? ¿No se muestra nada en la web? el 24 oct. 2016 a las 15:50
  • No da error, y no muestra nada, como si no estuviera el 24 oct. 2016 a las 15:51
  • Hola @Borja Calvo, no olvides marcar la respuesta que te parezca correcta. Saludos
    – chenio
    el 31 oct. 2016 a las 22:29

5 respuestas 5

6

No es necesario usar href para abrir una ventana modal, bastaría con añadir el atributo data-target y que haga referencia al id de la ventana que mostraras , para los eventos bootstrap tiene sus propios eventos para detectar el show y el hide de tu ventana Modal modals-events

$("#btn-AddDate").on("click",function() {
  alert("Modal Mostrada");
});

$('#AddDate').on('show.bs.modal', function (e) {
  alert("Modal Mostrada con Evento de Boostrap");
})
$('#AddDate').on('hidden.bs.modal', function (e) {
  alert("Modal Cerrada");
})
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<a id="btn-AddDate"  class=" btn btn-xs btn-success" data-toggle="modal" data-target="#AddDate">
  Añadir Fecha
</a>

<!-- Modal -->
<div class="modal fade" id="AddDate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Titulo</h4>
      </div>
      
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

1
  • El caso es que no me funciona ninguna de las opciones que han dejado los usuarios. Es raro por que en tu ejemplo si funciona el 25 oct. 2016 a las 13:47
2

Tratar de usar lo siguiente:

$(document).on('click', '.modal', function() {
    $('#msgError').html("");
    // su acción
});
2

Si el mensaje esta dentro del modal prueba con esto, talvez haya mas elementos con Id msgError

$("#btn-AddDate").on("click",function() {
   $('#AddDate #msgError').html("Se muestra el Modal");
});

$('#AddDate #msgError') con este selector apuntarias especificamente al que esta dentro del modal

2

Si usas los modales de bootstrap, puedes hacer lo siguiente:

$("#omodal").on("click",function(){
alert("Ingreso al modal dando click en <a>");
});
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Basic Modal Example</h2>
  <a data-toggle="modal" class="btn btn-info btn-lg" href="#myModal" id="omodal">Open Modal</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" 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">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

Aunque lo que dices en los comentarios dices que no muestra ningun error, puede ser por que solo estas seteando un texto en blanco en:

$('#msgError').html("");

Cambia eso por un alert o coloca otro texto para saber si está ingresando a la funcion correctamente.

2

Al final lo que he hecho es en lugar de ocultar el mensaje, es que cuando haya un mensaje al los x segundos se oculte.

$('#msgError').html("La hora de inicio no puede ser superior que la hora final");
$("#msgError").delay(10000).fadeOut("slow");

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.