Bootstrap Modale à partir d'une autre page

J'ai rencontré quelques problèmes lorsque j'essaie d'utiliser Bootstrap Modal dans mon code.

HTML:

<a href="http://another.page" data-toggle="modal">Another Page</a>

<a href="http://another.page" data-toggle="modal" data-target="#myModal">Another Page</a>

J'aimerais modal another.page de ma page, mais ça ne fonctionne pas.

la another.page ressemble à:

<html>
  <body>
    <div id="myModal" class="tm-modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
      <div class="tm-modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> </button>
        <h6>Modal Heading</h6>
      </div>
      <div class="tm-modal-body">
        <p>One fine body
          <85>
        </p>
      </div>
      <div class="tm-modal-footer">
        <button class="tm-btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="tm-btn tm-btn-recommand">Save changes</button>
      </div>
    </div>
  </body>
</html>

Je ne veux pas charger le another.page comme un <div> dans mon code, car il y a trop d'endroit que j'ai besoin d'utiliser modal.

Ai-je manqué quelque chose d'important?

Merci beaucoup.

Essayez de cette réponse. Il a travaillé pour moi.

OriginalL'auteur Jimmy Lin | 2014-05-22

3

Faire usage de l'élément iframe
```
<div class="modal-body">
    <iframe src="another.page" />
</div>
```
Et peut-être vous voulez style, il
```
.modal iframe {
    width: 100%;
    height: 100%;
}
```
http://jsfiddle.net/u29Tj/3/

Juste pour être clair, que vous avez lu le manuel, en fonction de vos commentaires:

Regarder la data-target attribut de votre lien: C'est un point d'ancrage pour la HTML Element Modal Window. Vous en avez besoin pour Bootstrap pour afficher et masquer la fenêtre. Vous ne devriez pas le lier à votre page. Vous devez le lier à votre Modal! Dans le Modal Corps vous utiliser l'Iframe.
```

<a data-toggle="modal" href="#myModal">
  Launch demo modal
</a>

<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" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
          <iframe src="http://stackoverflow.com/questions/23801446/bootstrap-modal-from-another-page/23801599" />
      </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>
```
Alternative

Les devoirs à faire pour vous:
- Donner à chaque lien data-iframemodal Attribut que vous souhaitez avoir une Iframe.
- Définir un Clickhandler pour chaque attribut qui a data-iframemodel:
  - Ouvrir un nouveau Modal via JS. http://getbootstrap.com/javascript/
  - De Contenu d'ensemble avec iframe et comme source de vous extraire de l'événement les expéditeurs attribut href.
Puis-je utiliser bootstrap modal pour résoudre mon problème?
Pas vraiment comprendre votre question?
Le <div class="tm-modal-body"> est déjà dans another.page, pourquoi devrais-je utiliser d'iFrame dans la page?
Je comprends: Comment puis-je inclure une autre page dans ma première page "Fenêtre Modale"? Iframe est la réponse. Excusez-moi, si-je missunderstood vous. Pouvez-vous fournir plus de Détails au sujet de votre Problème?
Avoir mis à jour ma Réponse. Est-ce que tu veux dire?

OriginalL'auteur Christian Gollhardt

Voulez-vous de la page 1 ouvrez la page 2 et que le modal à l'intérieur de cette deuxième page? si oui, voici une solution:

À la première page, vous allez utiliser:

<a href="second.html#myModal" class="btn btn-primary"> Open Modal </a>

À la deuxième page, vous allez insérer votre modal et le suivi de script:

(function() {
  'use strict';

  function remoteModal(idModal) {
    var vm = this;
    vm.modal = $(idModal);

    if (vm.modal.length == 0) {
      return false;
    }

    if (window.location.hash == idModal) {
      openModal();
    }

    var services = {
      open: openModal,
      close: closeModal
    };

    return services;

    //method to open modal
    function openModal() {
      vm.modal.modal('show');
    }

    //method to close modal
    function closeModal() {
      vm.modal.modal('hide');
    }
  }
  Window.prototype.remoteModal = remoteModal;
})();

$(function() {
   window.remoteModal('#myModal');
});

OriginalL'auteur burunoh

Faire usage de l'élément div

<div class="modal-body">
   <div id="modal-isi-body"></div>
</div>

et faire un script

<script>
    $(document).ready(function(){
        $("#myBtn").click(function(){
            $("#myModal").modal();
            load_page('http://another.page');
        });
    });

    function load_page(url){
        $('#modal-isi-body').load(url,function(){});
    }
</script>

et changement

<a href="#" id="myBtn">Another Page</a>

c'est autre solution
bonne chance

J'ai essayé load_page('google.com') ne fonctionne pas... une suggestion ? Ada saran lain gan ?

OriginalL'auteur Ramadhianto Handiprimastono

Vous devez vous connecter pour publier un commentaire.