Il bootstrap modale al clic del pulsante richiede il ricaricamento completo della finestra modale
Devo ricaricare completamente la finestra modale facendo clic sul pulsante (span qui) In questo momento facendo clic si apre la finestra modale e si chiude la finestra modale.
se utilizzo questo codice:
$('#youtubeModal').on('hidden.bs.modal', function (event) { $('#youtubeModal').modal('toggle')
})
Sta solo riaprendo la finestra modale, ma ho bisogno di ricaricare completamente.
Adesso ho diritto:
- Premo il pulsante.
- Modale mostrato con tutto funzionante bene.
- Premo il pulsante
- Modale nascosto.
- Premo il pulsante.
- Modal aperto e caricamento di nuovo ajax e funziona bene.
Devo eliminare 4. e 5.:
Premo il pulsante.
Modale mostrato con tutto funzionante bene.
Premo il pulsante
Modal riapre e ricaricare ajax e funziona bene.
<div class="modal fade" id="youtubeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script> $('#youtubeModal').on('show.bs.modal', function (event) { let button = $(event.relatedTarget) // Button that triggered the modal let youtubeUrl = button.data('url') // Extract info from data-* attributes $.ajax({ url: '<?= \yii\helpers\Url::toRoute(['youtube/index'])?>', type: 'post', data: {youtubeUrl: youtubeUrl}, success(response) { // Add response in Modal body $('.modal-body').html(response); //$('#exampleModal').html(response); // Display Modal //$('#exampleModal').modal('show'); } }); }); </script>
Risposte
Sembra che tu abbia bisogno di un trigger personalizzato e fallo in modo programmatico perché il trigger di commutazione dati BS predefinito ha un'altra logica
<span id="play-button" class="fa fa-play-circle play-button" data-url="watch?v=ik7ysDGWbcw" onclick="showYoutubeModal(this)">click me</span>
<div class="modal fade" id="youtubeModal" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
var youtubeModal = $('#youtubeModal').modal({'show': false}); youtubeModal.on('show.bs.modal', function (event) { let button = $(event.relatedTarget);
let youtubeUrl = button.data('url');
$.ajax({ url: '<?= \yii\helpers\Url::toRoute(['youtube/index'])?>', type: 'post', data: {youtubeUrl: youtubeUrl}, success(response) { // Add response in Modal body $('.modal-body').html(response);
//$('#exampleModal').html(response); // Display Modal //$('#exampleModal').modal('show');
}
});
});
function showYoutubeModal(trigger) {
// here you can call modal function programmatically
// depending on your needs
youtubeModal.modal('show', $(trigger));
}
</script>
Puoi trovare anche maggiori informazioni qui
Come passare i parametri a modal quando lo chiamo a livello di codice?