Bootstrap 3 avec Modal distant

Question

Je viens de commencer un nouveau projet avec la nouvelle version de Twitter Bootstrap: bootstrap 3. Je ne parviens pas à faire fonctionner Modal en mode distant. Je veux juste que lorsque je clique sur un lien, il affiche le modal avec le contenu de l'URL distante. Je travaille mais la mise en page modale est complètement détruite.

Voici un lien vers un jsfiffle: http://jsfiddle.net/NUCgp/5/

Le code :

 <a data-toggle="modal" href="http://fiddle.jshell.net/Sherbrow/bHmRB/0/show/" data-target="#myModal">Click me !</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body"><div class="te"></div></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
 

Est-ce que quelqu'un peut faire en sorte que cet exemple simple fonctionne?

Answer 1

Concernant la télécommande en option pour les auxiliaires modaux, à partir de la documentation:

Si une URL distante est fourni, le contenu sera chargé via jQuery load méthode et injecté dans la racine de l'élément modal.

Cela signifie que votre fichier distant doit fournir l'entière structure modale, et pas seulement ce que vous voulez afficher sur le corps.

Bootstrap 3.1 Mise À Jour:

En v3.1 ci-dessus comportement a changé et maintenant la distance le contenu est chargé dans .modal-content

Voir cette Démo violon

Answer 2

Pour Bootstrap 3

Le flux de travail j'ai eu à traiter était en train de charger du contenu avec un contexte d'url qui pourrait changer. Donc par défaut la configuration de votre modale avec le javascript ou le href du contexte par défaut que vous souhaitez afficher :

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

Détruire le modal ne fonctionnerait pas pour moi parce que je n'étais pas le chargement à partir de la même télécommande, j'ai donc eu :

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

Bien sûr, cela a été facilement remaniée dans une bibliothèque js et vous donne beaucoup de flexibilité avec le chargement des modaux

J'espère que cela sauve quelqu'un à 15 minutes de bricolage.

Answer 3

Si vous ne souhaitez pas envoyer la structure modale complète, vous pouvez répliquer l'ancien comportement en procédant comme suit:

 // 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();
});
 

Answer 4

Voici ma solution (effet de levier un peu au-dessus) qui rend l'utilisation de BS3 propre structure de rétablir l'ancien chargement à distance de comportement. Il devrait être transparente.

Je vais garder la variable code lourd et le descriptif pour garder les choses compréhensibles. Je suis aussi en supposant la présence de JQuery. Javascript lourd palonnier types de la main de simplifier le code.

Pour référence, voici un lien qui appelle une BS3 modal:

<li><a data-toggle="modal" href="terms.html" data-target="#terms">Terms of Use</a></li>

Dans youre Javascript, vous aurez besoin de ce qui suit.

// 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 <div class="modal-body"> so we can populate it
    var modalBody = $(target_modal + ' .modal-body');

    // Capture BS3's show.bs.modal which is fires
    // immediately when, you guessed it, the show instance method
    // for the modal is called
    modal.on('show.bs.modal', function () {
            // use your remote content URL to load the modal body
            modalBody.load(remote_content);
        }).modal();
        // and show the modal

    // Now return a false (negating the link action) to prevent Bootstrap's JS 3.1.1
    // from throwing a 'preventDefault' error due to us overriding the anchor usage.
    return false;
  });
});

Nous sommes à peu près là. Une chose que vous pouvez faire est de style modal corps avec un max de hauteur, de sorte qu'un contenu long de défilement.

Dans votre CSS, vous aurez besoin des éléments suivants:

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

Juste pour refference je vais inclure le modal du HTML, qui est un knock-off de chaque Bootsrap Modal Exemple que vous avez jamais vu:

<div id="terms" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="termsLabel" class="modal-title">TERMS AND CONDITIONS</h3>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 5

Même si je n'aime pas modifier le code Bootstrap (ce qui rend la mise à niveau plus difficile), vous pouvez simplement ajouter ".find ('. Modal-body') à l'instruction load dans modal.js comme suit:

 // 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)