Jquery pour ouvrir Bootstrap v3 modal de l'url distante

j'ai une page de liens vers des pages internes que je dois ouvrir dans un bootstrap modal DIV. Le problème est qu'il semble que l'utilisation de la dernière version de Bootstrap v3 en conjonction avec jQuery v2.1.4 ne fonctionne tout simplement pas quand il s'agit de charger le contenu de cette façon. Il y a beaucoup de tutoriels que j'ai lu sur la création de modaux avec Bootstrap et comment le contenu distant est éliminé. Mais il doit y avoir une absence pour que ça marche avec jQuery, ou peut-être pas.

La théorie est que, lorsque vous cliquez sur

<a class="" href="/log/viewslim?id=72" title="View" data-target="#myModal" data-toggle="modal">View 72</a>

le contenu de chargement de données distant est censé être lu et injecté dans le div avec la classe modal-body. 

<div id="myModal" class="modal fade">
<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">Event</h4>
            </div>
            <div class="modal-body">
                <p>Loading...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
            </div>
    </div>
</div>

Cependant, lorsque j'essaie de cet exemple avec jQuery v2.1.4 et BS v3.3+, ce qu'il fait est d'ouvrir une fenêtre modale avec fond gris, mais tout le style de la fenêtre modale est allé. Ce qui signifie qu'il semble n'afficher que le div modal-body, mais l'en-tête modal, le joli cadre modal et les boutons du bas de page dans le div modal-Foot sont ne s'affichent pas du tout. La seule façon de fermer la boîte est de cliquer en dehors de la boîte modale.partial modal window

j'ai trouvé des exemples tout autour de comment ouvrir les URL distantes de cette façon, mais ils utilisent tous la version périmée de bootstrap, pas la version avec laquelle je travaille. Quelqu'un peut jeter quelques lumières sur cette s'il vous plaît?

20
demandé sur worldofjr 2015-12-29 05:44:52

5 réponses

donc en gros, dans jquery ce que nous pouvons faire est de charger l'attribut href en utilisant le la fonction de charge. De cette façon, nous pouvons utiliser l'url <a> et la balise de charge qui en modal-body. 

<a  href='/site/login' class='ls-modal'>Login</a>

//JS script
$('.ls-modal').on('click', function(e){
  e.preventDefault();
  $('#myModal').modal('show').find('.modal-body').load($(this).attr('href'));
});
34
répondu Kijan Maharjan 2018-04-25 15:40:50

Bootstrap de docs à propos de la remote option;

cette option est dépréciée depuis v3.3.0 et a été supprimé en v4. nous recommandons plutôt l'utilisation de templating côté client ou d'un framework de liaison de données, ou d'appeler jQuery.charger vous-même.

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

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

C'est le .modal-content div, pas .modal-body. Si vous voulez mettre le contenu à l'intérieur de .modal-body ensuite, vous devez le faire avec du javascript personnalisé.

je voudrais Donc appeler jQuery.load programmatically, ce qui signifie que vous pouvez garder la fonctionnalité des boutons de rejeter et/ou d'autres selon les besoins.

Pour ce faire, vous pouvez utiliser une des données tag avec L'URL du bouton qui ouvre le modal, et utilisez le show.bs.modal événement pour charger le contenu dans le .modal-body div.

lien/Bouton HTML

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

jQuery

$('#myModal').on('show.bs.modal', function (e) {
    var loadurl = $(e.relatedTarget).data('load-url');
    $(this).find('.modal-body').load(loadurl);
});
13
répondu worldofjr 2018-09-22 19:40:03

d'Un point de vue différent pour le même problème de Javascript et en php:

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

<div class="modal fade" tabindex="-1" aria-labelledby="gridSystemModalLabel" id="myModal" role="dialog" style="max-width: 90%;">
    <div class="modal-dialog" style="text-align: left;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body">
                <?php include( 'remotefile.php'); ?>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

et le mettre dans la télécommande.php fichier Votre source html de base.

1
répondu Dan 2017-07-21 09:30:28

e.relatedTarget.data('load-url'); ne fonctionne pas

utilisez ensemble de données.loadUrl

$('#myModal').on('show.bs.modal', function (e) {
    var loadurl = e.relatedTarget.dataset.loadUrl;
    $(this).find('.modal-body').load(loadurl);
});
1
répondu Kuzma 2017-09-24 10:06:38

si vous utilisez @worldofjr answer dans jQuery vous obtenez une erreur:

e.relatedTarget.de données n'est pas une fonction

vous devez utiliser:

$('#myModal').on('show.bs.modal', function (e) {
    var loadurl = $(e.relatedTarget).data('load-url');
    $(this).find('.modal-body').load(loadurl);
});

e.relatedTarget si emballés par $(..)

je recevais l'erreur dans le dernier Bootstrap 3 et après avoir utilisé cette méthode, il fonctionne sans aucun problème.

0
répondu Marcin Nabiałek 2017-05-16 19:03:39