web-dev-qa-db-fra.com

JQuery pour ouvrir le modal Bootstrap v3 de l'URL distante

J'ai une page de liens vers des pages internes que je dois ouvrir dans un DIV modal Bootstrap. Le problème est qu’il semble que l’utilisation de la dernière version de Bootstrap v3 avec jQuery v2.1.4 ne fonctionne tout simplement pas quand il s’agit de charger du contenu de cette façon. J'ai lu de nombreux tutoriels sur la création de modaux avec Bootstrap et sur la suppression progressive du contenu distant. Mais il faut être loin pour que cela fonctionne avec jQuery, ou peut-être pas.

La théorie est que lorsque vous cliquez

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

le contenu de data-load-remote 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 cet exemple avec jQuery v2.1.4 et BS v3.3 +, il ouvre une fenêtre modale avec un arrière-plan gris, mais tout le style de la fenêtre modale a disparu. Cela 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 dans modal footer div ne sont pas affichés du tout. La seule façon de fermer la boîte consiste à cliquer en dehors de la boîte modale.  partial modal window

J'ai trouvé des exemples sur la façon d'ouvrir des URL distantes de cette façon, mais ils utilisent tous une version obsolète de bootstrap, pas la version avec laquelle je travaille. Quelqu'un peut-il nous éclairer s'il vous plait?

jquerytwitter-bootstraptwitter-bootstrap-3bootstrap-modal
22
vanarie

Donc, fondamentalement, en jquery, nous pouvons charger l'attribut href en utilisant la fonction load . De cette façon, nous pouvons utiliser l'URL dans la balise <a> et la charger dans 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'));
});
37
Kijan Maharjan

De Documents 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 vous recommandons plutôt d'utiliser des modèles côté client ou un cadre de liaison de données, ou d'appeler jQuery.load vous-même.

Si une URL distante est fournie, le contenu sera chargé une fois via la méthode load de jQuery et injecté dans le .modal-content div. Si vous utilisez data-api, vous pouvez également utiliser l'attribut href 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 souhaitez insérer du contenu dans .modal-body, vous devez le faire avec du javascript personnalisé.

Je voudrais donc appeler jQuery.load par programme, ce qui signifie que vous pouvez conserver les fonctionnalités du bouton de renvoi et/ou d’autres boutons selon vos besoins.

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

Lien HTML/Bouton

<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);
});
14
worldofjr

e.relatedTarget.data('load-url'); ne fonctionnera pas
use dataset.loadUrl  

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

Une perspective différente du même problème loin de Javascript et utilisant 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 mettez dans le fichier remote.php votre source HTML de base.

1
Dan

Si vous utilisez @worldofjr answer dans jQuery, vous obtenez une erreur:

e.relatedTarget.data n'est pas une fonction

tu devrais utiliser:

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

Pas ce e.relatedTarget si emballé par $(..)

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

0
Marcin Nabiałek