web-dev-qa-db-fra.com

Obtenir le contenu modal de Bootstrap à partir d'une autre page

J'ai une ancre dans une page appelée menu.html et j'ai du mal à obtenir un Bootstrap modal pour afficher les données d'une autre page appelée Lab6.html.

menu.html

<div class="collapse navbar-collapse navbar-exl-collapse">
  <ul class="nav navbar-nav" id="menu">
    <li><a href="/emplookup.html">Lookup</a></li>
    <li><a href="/modalexample.html">Modals</a></li>
    <li><a href="/Lab6.html#theModal" data-toggle="modal">Lab 6</a></li><!-- this one -->
  </ul>
</div>

Lab6.html

<div class="modal fade text-center" id="theModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">X</button>
        <h1>Lab 6</h1>
      </div>
      <div class="modal-body">
        <div class="panel panel-default">
          <div class="panel-heading text-center">
            Employee Information
          </div>
          <div class="panel-body">
            <div class="row">
              <div class="text-right col-xs-2">Title:</div>
              <div class="text-left col-xs-3" id="title"></div>
              <div class="text-right col-xs-2">First:</div>
              <div class="text-left col-xs-3" id="firstname"></div>
            </div>
            <div class="row">
              <div class="text-right col-xs-2">Phone#</div>
              <div class="text-left col-xs-3" id="phone"></div>
              <div class="text-right col-xs-2">Email</div>
              <div class="text-left col-xs-3" id="email"></div>
            </div>
            <div class="row">
              <div class="text-right col-xs-2">Dept:</div>
              <div class="text-left col-xs-3" id="departmentname"></div>
              <div class="text-left col-xs-2">Surname:</div>
              <div class="text-left col-xs-4">
                <input type="text" placeholder="enter last name" id="TextBoxLastName" class="form-control" />
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="panel-footer">
            <input type="button" value="Find Employee" id="empbutton" />
            <div class="col-xs-10" id="lblstatus"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>

Suis-je en train de faire quelque chose de mal?

javascriptjqueryhtmltwitter-bootstrapmodal-dialog
15
Corivo

Mise à jour

La façon dont vous essayez d'obtenir le contenu modal d'une autre page est incorrecte.

Selon documentation de Bootstrap :

Si une URL distante est fournie, le contenu sera chargé une fois via la méthode de chargement de jQuery et injecté dans le .modal-content div. Si vous utilisez l'api de données, vous pouvez également utiliser l'attribut href pour spécifier la source distante. Un exemple de ceci est illustré ci-dessous:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

Donc, tout d'abord, vous devez changer votre menu.html fichier pour être similaire au code ci-dessus:

<li><a href="Lab6.html" data-target="#theModal" data-toggle="modal">Lab 6</a></li>

Et puis, une partie de votre Lab6.html la page doit résider dans votre menu.html page. Par exemple:

<div class="modal fade text-center" id="theModal">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

Enfin, votre LAB6.html n'aurait que le code qui était à l'intérieur .modal-content. Par exemple:

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">X</button>
  <h1>Lab 6</h1>
</div>
<div class="modal-body">
  <div class="panel panel-default">
    <div class="panel-heading text-center">
      Employee Information
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="text-right col-xs-2">Title:</div>
        <div class="text-left col-xs-3" id="title"></div>
        <div class="text-right col-xs-2">First:</div>
        <div class="text-left col-xs-3" id="firstname"></div>
      </div>
      <div class="row">
        <div class="text-right col-xs-2">Phone#</div>
        <div class="text-left col-xs-3" id="phone"></div>
        <div class="text-right col-xs-2">Email</div>
        <div class="text-left col-xs-3" id="email"></div>
      </div>
      <div class="row">
        <div class="text-right col-xs-2">Dept:</div>
        <div class="text-left col-xs-3" id="departmentname"></div>
        <div class="text-left col-xs-2">Surname:</div>
        <div class="text-left col-xs-4">
          <input type="text" placeholder="enter last name" id="TextBoxLastName" class="form-control" />
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <div class="panel-footer">
      <input type="button" value="Find Employee" id="empbutton" />
      <div class="col-xs-10" id="lblstatus"></div>
    </div>
  </div>
</div>

Jetez un oeil à le plnkr que j'ai créé pour vous .

31
Buzinas

Notez que si vous utilisez Bootstrap 4, la réponse acceptée ne fonctionne pas, car selon documentation de Bootstrap à propos de l'option remote:

Cette option est obsolète depuis la v3.3.0 et a été supprimée dans la v4. Nous recommandons plutôt d'utiliser des modèles côté client ou un cadre de liaison de données, ou d'appeler jQuery .chargez-vous.

Si une URL distante est fournie, le contenu sera chargé une seule fois via la méthode load de jQuery et injecté dans la div .modal-content. Si vous utilisez l'api de données, vous pouvez également utiliser l'attribut href pour spécifier la source distante. Un exemple de ceci est illustré ci-dessous:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

Pour le faire fonctionner, supprimez d'abord les attributs data-target Et data-toggle Du lien. Vous pouvez y laisser l'attribut href.

<li><a href="Lab6.html" class='li-modal'>Lab 6</a></li>

En utilisant jQuery, nous pouvons ajouter un écouteur de clics à l'élément <a>, Mais nous ne voulons pas accéder directement à la page indiquée par l'attribut href donc nous utilisons preventDefault(). En utilisant simplement la méthode load de jQuery, nous pouvons charger le contenu de la page lab6.html Dans modal-content.

$('.li-modal').on('click', function(e){
      e.preventDefault();
      $('#theModal').modal('show').find('.modal-content').load($(this).attr('href'));
    });

Exemple complet ici.

11
Csaba