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? Commented el 24 oct. 2016 a las 15:50
  • No da error, y no muestra nada, como si no estuviera Commented el 24 oct. 2016 a las 15:51
  • Hola @Borja Calvo, no olvides marcar la respuesta que te parezca correcta. Saludos
    – chenio
    Commented 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 Commented 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

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.