web-dev-qa-db-fra.com

Ouvrez le contenu distant dans la fenêtre modale Bootstrap

Tout ce dont j'ai besoin est un exemple simple sur la façon d'ouvrir un contenu distant dans une fenêtre modale Twitter Bootstrap.

J'utilise Bootstrap v2.0.4 et je n'arrive pas à le faire fonctionner. Je peux ouvrir des fenêtres modales régulières, mais je ne peux pas lui faire ouvrir un fichier distant à l'intérieur.

javascripttwitter-bootstrapmodal-dialog
21
fackz

Tout d'abord, les données distantes doivent respecter la même politique d'origine. Si vous n'êtes pas satisfait, tout ce qui va échouer après cela (si vous essayez de charger des URL externes, voir Twitter Bootstrap les URL externes ne fonctionnent pas ) .

Il y a deux façons d'accomplir le chargement de contenu distant dans un modal avec le Bootstrap data-api. À savoir soit spécifier l'url distante à charger dans le <a> élément qui déclenche le modal ou pour spécifier l'url dans le balisage du modal.

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

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

Dans ce dernier, on utilise la propriété data-remote :

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

L'avantage de le spécifier dans le <a> L'élément est que l'on pourrait avoir une URL distante différente pour chaque <a>, mais n'utilise encore qu'un seul modal. L'utilisation de la propriété data-remote peut être plus avantageuse dans les situations où vous avez plusieurs moyens de lancer un modal avec le même contenu. Ensuite, peu importe ce qui le lance (même un appel JS), il fournirait systématiquement le même contenu distant, sans avoir à dupliquer ces informations dans toutes les méthodes d'invocation.

Voici une démo utilisant cette dernière méthode:

JSFiddle

Le contenu dans le corps du modal est le html distant.

23
merv

J'ai déposé un exemple de travail ici sur JSFiddle qui illustre comment utiliser un lien pour ouvrir un bootstrap modal contenant une URL distante (de la même origine). C'est un copier-coller presque textuel de - Twitter bootstrap docs avec quelques modifications mineures pour le faire fonctionner pour les URL distants.

Cela revient à pointer l'attribut href vers l'URL que vous souhaitez ouvrir et la cible de données attribut au DIV qui agit comme 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>​
8
Matt Schwartz