Buenos días,
Me estoy encontrando con un problema en los modales de bootstrap y el botón de cerrar y no consigo solucionarlo. A ver si podéis ayudarme.
Me estoy basando en el ejemplo de la web de bootstrap Varying modal content based on trigger button:
http://getbootstrap.com/javascript/#...related-target
El problema viene cuando abro un modal haciendo click en un boton y la cierro con el botón de close. Pulso otro boton para abrir nuevamente el modal con otro contenido y pulso el boton de SEND. Si saco todos los movimientos por console.log veo que parece que almacena el valor data de la primera ventana que ya está cerrada mas el de la segunda porque lo que me interpreta
No se porque hace esto, pero necesito que cuando se cierre, esa pila de eventos se limpie o que solamente me muestre al pulsar el SEND el valor data de la ventana actual. La verdad es que no se porque sucede esto y como solucionarlo.
Pego el código del ejemplo de getbootstrap.
Código HTML:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<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">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnclose" class="btn btn-default">Close</button>
<button type="button" id="btnsend" class="btn btn-primary">Send message</button
</div>
</div>
</div>
</div> Aqui os pongo el script donde están los eventos para manejar los botones dentro del modal y el modal.
Código HTML:
<script>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
$('body').on("click", "#btnsend", function (e){
e.preventDefault();
console.log('Pinchado')
console.log(recipient)
})
})
$('#exampleModal').on('hidden.bs.modal', function (e) {
console.log('Cerrada');
e.preventDefault();
e.stopPropagation();
})
$('body').on('click','#btnclose',function (e) {
console.log('Cerrar');
e.stopPropagation();
$('#exampleModal').modal('hide');
});
</script> A ver si podeis ayudarme con esto.
No se si os funcionara pero os paso el código ya escrito en el
https://jsfiddle.net/DTcHh/28480/
Muchas gracias por adelantado.