L'obtention de Bootstrap modale du contenu à partir d'une autre page

J'ai une ancre dans une page appelée menu.html et je vais avoir du mal à trouver un modal Bootstrap pour afficher des données à partir 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>

Je fais quelque chose de mal?

  • Bonjour étranger! S'il vous plaît, poste le code complet ou créer une démo en jsfiddle.net. Merci!!
  • Bonjour, c'est essentiellement tout le code, la seule chose que j'ai placé dans menu.html, est le point d'ancrage à la modale. La seule chose que j'ai laissé de côté a été <link href="Contenu/bootstrap.css" /> situé dans le </head> tag pour Lab6.html
  • Voici une mise à jour modale, contenu dans Bootstrap 4: stackoverflow.com/a/48934494/171456
InformationsquelleAutor Corivo | 2015-10-05
  1. 31

    Mise à jour

    La façon dont vous essayez d'obtenir modale du contenu à partir d'une autre page est incorrecte.

    Selon Bootstrap, documentation:

    Si une URL distante est fourni, le contenu sera chargée une seule fois par
    de jQuery de la méthode de chargement et injecté dans le .modal-content div. Si
    vous êtes en utilisant les données de l'api, vous pouvez également utiliser le href
    attribut pour spécifier la distance de la source. Un exemple de ceci est montré
    ci-dessous:

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

    Donc, tout d'abord, vous devriez changer votre menu.html de fichier similaires à le 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 page doit résider à l'intérieur de votre menu.html page. E. g:

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

    Enfin, votre LAB6.html aurait seulement le code qui était à l'intérieur .modal-content. E. g:

    <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>

    Prendre un coup d'oeil à le plnkr j'ai créé pour vous.

    • Hey merci pour la réponse, cependant le code modal est situé dans lab6.html. J'ai édité ma question pour une meilleure clarification.
    • mise à jour de ma réponse.
    • merci pour votre aide! Apprécier une tonne!
    • Comment puis-je accéder à particulier modale si j'ai plusieurs auxiliaires modaux en Lab6.html?
    • L'idée de l'utilisation de modal par balise d'ancrage ne fonctionne pas du tout.
    • Cette solution a bien fonctionné avec Bootstrap 3.Mais je ne suis pas en mesure de lancer modal en utilisant la procédure ci-dessus.Pouvez-vous me dire comment faire pour mettre en œuvre avec Bootstrap 4?
    • vérifier ma réponse

    InformationsquelleAutor Buzinas
  2. 10

    Noter que si vous êtes en utilisant Bootstrap 4, de la accepté de répondre ne fonctionne pas, parce que, selon Bootstrap de docs sur le remote option:

    Cette option est obsolète depuis la v3.3.0 et a été supprimé dans la version 4. Nous vous recommandons d'utiliser côté client création de modèles ou d'une liaison de données-cadre, ou l'appel de jQuery.charger vous-même.

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

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

    Pour le faire fonctionner, retirez d'abord la data-target et data-toggle attributs à partir du lien. Vous pouvez laisser le href attribut n'.

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

    À l'aide de jQuery, nous pouvons ajouter un écouteur de clics à la <a> élément, mais nous ne voulons pas aller directement à la page indiquée par le href attribut afin que nous utilisons preventDefault(). Simplement à l'aide de jQuery charge méthode, nous pouvons charger le contenu de la lab6.html page en modal-content.

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

    Exemple complet ici.

    InformationsquelleAutor Csaba