[Résolu] Contenu distant dans un modal Bootstrap ?

Bonjour,

Pour un site développé en html avec Boostrap, je dois afficher un contenu distant dans un pop up/pop in, plutôt que d'envoyer le visiteur sur le site en question dans un nouvel onglet.
Quelle est la technique la plus approprié ?
Le modal me paraît être la bonne solution pour avoir mon "pop up" mis comment intégrer à l'intérieur un contenu distant.
Est ce que vous voyez des freins tablettes / mobiles à faire ça ?
Bonne journée et merci !

Hello,

Tu peux très bien insérer une iframe dans ta modal...

<div class="modal fade" id="modal-id">
  <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">
        <iframe src="http://www.alsacreations.fr" frameborder="0" width="100%" height="400"></iframe>
      </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>
  </div>
</div>

L'iframe n'est jamais très beau je trouve mais parfois on a pas trop le choix... (sans vouloir passer pas mal de temps ou avoir du contenu dupliqué). Si je l'utilise j'essaie de le faire pour un mieux. Donc, toujours un width à 100% + regarder le coté mobile de ta page a insérer.

Pour aller plus loin, ce que je fais c'est que je ne mets pas l'url directement dans le src car ça fera directement des requêtes (il y en a déjà assez comme ça) pour l'utilisateur qui devra charger l'iframe même si il ne va pas la voir. Je place donc l'url dans un data-src et à l'ouverture de ma modal, j'ai un petit script qui remplace l'url de mon data-src dans mon src.

Merci, ça fonctionne bien.
En revanche, le modal a forcément cette largeur car j'ai un ascenseur horizontal et je voudrais l'éviter, comment puis-je faire ?
Merci !

Hello,

Sorry, je n'ai pas trop compris ta réponse. Tu as un exemple en ligne ?

Voilà. J'aimerais que la largeur du modal s'adapte à la largeur de mon contenu pour éviter l'acsenseur horizontal. Et que ça s'adapte sur mobile / tablette...
Merci pour ton aide !!

En fait, tu dois penser dans l'autre sens... C'est le contenu qui doit s'adapter à ta modal (en ajoutant les media queries qui vont bien dans ta page externe). Après, rien ne t'empêche de donner une taille différente à ta modal (la class modal-lg existe déjà dans Bootstrap pour une taille supérieure)
Modifié par Yordi (24 Jun 2016 - 10:34)

Ah mais oui !
Merci bcp et bone fin de smeaine !

Bonjour,

J'ai remarqué que l'iframe dans la modale est chargée en arrière-plan. Cela ne pose pas de problème en temps normal.
MAIS, si j'applique ce système dans un boucle, par exemple un tableau de listing de commandes, et que j'ai une modale avec iframe qui m permet d'afficher le détail de la commande ou du client, dans ce cas la page met une plombe à s'afficher.

Existe-t-il un mecanisme permettant d'empêcher le chargement de l'iframe tant que la fenêtre modale n'est pas ouverte / active ?