Bootstrap 3 con Modal remoto

Ho appena iniziato un nuovo progetto con la nuova versione di Twitter Bootstrap: bootstrap 3. Non riesco a far funzionare Modal in modalità remota. Voglio solo che quando clicco su un link mostra la modale con il contenuto dell’URL remoto. Funziona ma il layout modale è completamente distrutto.

Ecco un link a un jsfiddle: http://jsfiddle.net/NUCgp/5/

Il codice :

Click me !    

Qualcuno può far funzionare questo semplice esempio?

Per quanto riguarda l’opzione remota per le modali, dai documenti :

Se viene fornito un URL remoto, il contenuto verrà caricato tramite il metodo di caricamento di jQuery e inserito nella radice dell’elemento modale .

Ciò significa che il tuo file remoto dovrebbe fornire la struttura modale completa, non solo ciò che desideri visualizzare sul corpo.

Aggiornamento Bootstrap 3.1:

Nella v3.1 il comportamento di cui sopra è stato modificato e ora il contenuto remoto viene caricato in .modal-content

Guarda questo violino Demo

Aggiornamento di Boostrap 3.3:

Questa opzione è obsoleta dalla v3.3.0 ed è stata rimossa in v4. Raccomandiamo invece di utilizzare il template sul lato client o un framework di associazione dati o di chiamare manualmente jQuery.load .

Per Bootstrap 3

Il stream di lavoro che dovevo affrontare era il caricamento di contenuti con un contesto di URL che potrebbe cambiare. Quindi, per impostazione predefinita, imposta la tua modal con javascript o href per il contesto predefinito che vuoi mostrare:

 $('#myModal').modal({ show: false, remote: 'some/context' }); 

Distruggere il modale non funzionerebbe per me perché non stavo caricando dallo stesso telecomando, quindi ho dovuto:

 $(".some-action-class").on('click', function () { $('#myModal').removeData('bs.modal'); $('#myModal').modal({remote: 'some/new/context?p=' + $(this).attr('buttonAttr') }); $('#myModal').modal('show'); }); 

Questo, naturalmente, è stato facilmente rifattorizzato in una libreria js e offre molta flessibilità con il caricamento delle modali

Spero che questo salvi qualcuno 15 minuti di armeggiare.

Se non vuoi inviare l’intera struttura modale, puoi replicare il vecchio comportamento facendo qualcosa del genere:

 // this is just an example, remember to adapt the selectors to your code! $('.modal-link').click(function(e) { var modal = $('#modal'), modalBody = $('#modal .modal-body'); modal .on('show.bs.modal', function () { modalBody.load(e.currentTarget.href) }) .modal(); e.preventDefault(); }); 

Ecco la mia soluzione (sfruttando alcuni precedenti) che utilizza la struttura di BS3 per ripristinare il vecchio comportamento di caricamento remoto. Dovrebbe essere senza soluzione di continuità.

Ho intenzione di mantenere la variabile del codice pesante e descrittiva per mantenere le cose comprensibili. Sto anche assumendo la presenza di JQuery. I tipi di sollevatore pesante Javascript semplificheranno facilmente il codice.

Per riferimento ecco un link che richiama un modale BS3:

 
  • Terms of Use
  • In youre Javascript avrai bisogno di quanto segue.

     // Make sure the DOM elements are loaded and accounted for $(document).ready(function() { // Match to Bootstraps data-toggle for the modal // and attach an onclick event handler $('a[data-toggle="modal"]').on('click', function(e) { // From the clicked element, get the data-target arrtibute // which BS3 uses to determine the target modal var target_modal = $(e.currentTarget).data('target'); // also get the remote content's URL var remote_content = e.currentTarget.href; // Find the target modal in the DOM var modal = $(target_modal); // Find the modal's  

    Siamo solo lì. Una cosa che potresti voler fare è modellare il corpo modale con un’altezza massima, in modo che i contenuti lunghi scorrano.

    Nel tuo CSS, avrai bisogno di quanto segue:

     .modal-body{ max-height: 300px; overflow-y: scroll; } 

    Solo per la refference includerò l’HTML del modal, che è un knock-off di ogni esempio di Bootsrap Modal che tu abbia mai visto:

      

    L’ho fatto:

     $('#myModal').on 'shown.bs.modal', (e) -> $(e.target).find('.modal-body').load('http://yourserver.com/content') 

    Per quanto non apprezzi la modifica del codice Bootstrap (rende più difficile l’aggiornamento), puoi semplicemente aggiungere “.find (‘. Modal-body’) all’istruzione load in modal.js come segue:

     // original code // if (this.options.remote) this.$element.load(this.options.remote) // modified code if (this.options.remote) this.$element.find('.modal-body').load(this.options.remote) 

    Ecco il metodo che uso. Non richiede alcun elemento DOM nascosto nella pagina e richiede solo un tag di ancoraggio con href del partial modale e una class di ‘modalTrigger’. Quando la modale è chiusa (nascosta) viene rimossa dal DOM.

      (function(){ // Create jQuery body object var $body = $('body'), // Use a tags with 'class="modalTrigger"' as the triggers $modalTriggers = $('a.modalTrigger'), // Trigger event handler openModal = function(evt) { var $trigger = $(this), // Trigger jQuery object modalPath = $trigger.attr('href'), // Modal path is href of trigger $newModal, // Declare modal variable removeModal = function(evt) { // Remove modal handler $newModal.off('hidden.bs.modal'); // Turn off 'hide' event $newModal.remove(); // Remove modal from DOM }, showModal = function(data) { // Ajax complete event handler $body.append(data); // Add to DOM $newModal = $('.modal').last(); // Modal jQuery object $newModal.modal('show'); // Showtime! $newModal.on('hidden.bs.modal',removeModal); // Remove modal from DOM on hide }; $.get(modalPath,showModal); // Ajax request evt.preventDefault(); // Prevent default a tag behavior }; $modalTriggers.on('click',openModal); // Add event handlers }()); 

    Per usare, basta creare un tag con href del partial modale:

     Open Modal 

    un altro ottimo e semplice modo è avere un modal cieco nel tuo layout e chiamarlo se necessario.

    JS

      var remote_modal = function(url) { // reset modal body with a spinner or empty content spinner = "
    " $("#remote-modal .modal-body").html(spinner) $("#remote-modal .modal-body").load(url); $("#remote-modal").modal("show"); }

    e il tuo HTML

        

    ora puoi semplicemente chiamare remote_modal('/my/url.html') e il contenuto verrà visualizzato all’interno del modale

    Lo faccio in questo modo:

       

    Ecco il mio a href:

     See All Notifications