Ouvrir à distance le contenu dans le Bootstrap fenêtre modale

Tout ce que je besoin est un exemple simple de comment ouvrir un contenu distant dans un Twitter Bootstrap fenêtre modale.

Je suis en utilisant Bootstrap v2.0.4 et je ne peux pas le faire fonctionner. Je peux ouvrir régulièrement les fenêtres modales, mais je ne peux pas le faire ouvrir un fichier distant à l'intérieur.

  • v2.0.4 ne prend pas en charge le contenu distant sur le mode de la sortie de la boîte. Mise à jour de votre fichier d'amorçage pour plus tard, si vous souhaitez utiliser Amorce une prise en charge intégrée.
InformationsquelleAutor fackz | 2012-08-28
  1. 23

    Tout d'abord, des données à distance doit s'acquitter de la même origine. Si vous n'êtes pas satisfaisant que, après tout c'est voué à l'échec (si vous êtes en essayant de charger l'URL externe, voir Twitter Bootstrap URL externe ne fonctionnent pas).

    Il existe deux façons de réaliser le chargement de contenu distant dans un modal avec le Bootstrap de données de l'api. À savoir soit de spécifier l'url distante à charger dans le <a> élément qui déclenche le modal ou pour spécifier l'url dans la modale du balisage.

    Dans le premier cas, on utilise le href propriété:

    <a data-target="#myModal" href="/remote/url" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

    Dans le second, on utilise le de données à distance propriété:

    <div class="modal fade hide" id="myModal" data-remote="/remote/url">...</div>

    L'avantage de le préciser dans le <a> élément est que l'on pourrait avoir une autre url distante pour chaque <a>, encore que l'utilisation d'un seul modal. À l'aide de la de données à distance propriété pourrait être plus avantageux dans le cas où vous disposez de plusieurs moyens de lancer une modale avec le même contenu. Alors, peu importe ce qu'il se lance (même un JS appel), il serait toujours fournir le même contenu à distance, sans avoir à dupliquer, de l'information sur toutes les méthodes d'invocation.

    Voici une démo à l'aide de la méthode de ce dernier:

    JSFiddle

    Le contenu dans le corps de la modale est la distance html.

    • J'ai un fichier nommé remote.html et c'est le fichier que je suis en train de charger en elle. J'ai juste essayé votre code à l'aide de données distant="remote.html" et cela ne fonctionne pas...pouvez-vous m'aider? 🙂
    • A la data-remote="remote.html" sur le <a> ou de l'élément avec la .modal? Il devrait être le dernier. Aussi, essayez peut-être l'aide d'un relatif à la racine de l'url, comme "/remote.html". Voyez-vous des erreurs dans le navigateur de la console?
    • Oui, je suis en utilisant votre JSFiddle code, il ressemble à ceci: <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-remote="/remote.html"> pas d'erreurs sur navigateur...ça ne marche pas charger le contenu et de le présenter comme "un beau corps"
    • À moins que vous pouvez configurer une page de test, je peux afficher, je suis à une perte quant à la façon d'aller de l'avant.
    • Avez-vous les gars obtenir que cela fonctionne? Je vais avoir le même problème.
    • jsfiddle.net/mmfansler/cp67J semble fonctionner sur google chrome mais pas sous firefox 16.0.1
    • Ce qui ne fonctionne pas avec elle? Je viens de réaliser que j'ai oublié de mettre la classe initiale hide sur le modal, de sorte qu'il était à l'origine de bloquer les événements de la souris sur le bouton lorsque la fenêtre est trop petite. C'est maintenant mis à jour et tout fonctionne dans FF pour moi.
    • Maintenant fonctionne pour moi aussi. Sans le cacher ne fonctionne que sur chrome. Sans se cacher mais avec bootstrap 2.1.1 fonctionne avec firefox aussi 🙂
    • Si vous êtes à l'aide de la div option, et php, en utilisant le standard option inclure php fonctionne IE <div id="myModal" class="modal cacher fade"> <?php include "inc_modal.php"; ?> </div>
    • Pour les Rails: = link_to 'cible', nil, :données => {:toggle => 'modal', :target => '#cible": distance => target_path }... j'ai eu de omettre le href. Merci!

    InformationsquelleAutor merv
  2. 8

    J'ai laissé tomber un exemple ici sur JSFiddle qui illustre comment utiliser un lien pour ouvrir un bootstrap modale contenant une URL distante (de la même origine). C'est un presque mot à mot le copier-coller à partir de de twitter bootstrap docs avec quelques modifications mineures pour le faire fonctionner pour une URL distante.

    Qu'il vient juste de pointer le href attribut de l'URL que vous souhaitez ouvrir et le de données cible attribut à l'élément DIV qui agit à titre de la fenêtre modale.

    JSFIddle ici

    Même code ici:

    <!-- Button to trigger modal -->
<a href="/matt_hwy1/uEQEP/4/show/" data-target="#myModal" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal Test Header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>​
    • voici une mise à jour de ce violon qui démontre que la première cliqué sur le lien devient la source de données à partir de là. si vous cliquez sur le premier lien, le second lien perd, et vice versa. jsfiddle.net/rbpasker/hRq82/113
    • Si nous essayons d'utiliser les mêmes modal pour les charger dynamiquement un contenu différent basé sur un href, il ne veut pas détruire le contenu modal et conserve la copie de la dernière modal de référence - par exemple, jsfiddle.net/AYcne
    • L'exemple affiché ne semble pas ouvrir en modal.
    InformationsquelleAutor Matt Schwartz