Utiliser modal pour charger les données en une seule fois

Cette fois, je vais vous apporter les précautions lors de l'utilisation du modal pour charger des données en une seule fois. Ce qui suit est un cas pratique, jetons un coup d'œil.

1. BootstrapBoîte de dialogue modale et utilisation simple

 <p id="myModal" class="modal hide fade">
 <p class="modal-header">
 <button type="button" class="close" data-dismiss="modal">x</button>
 <h3>对话框标题</h3>
 </p>
 <p class="modal-body">
 <p>对话框主体</p>
 </p>
 <p class="modal-footer">
 <a href="#" rel="external nofollow" rel="external nofollow" class="btn" data-dismiss="modal">取消</a>
 <a href="#" rel="external nofollow" rel="external nofollow" class="btn btn-primary" data-dismiss="modal">确定</a>
 </p>
</p>

Les dialogues modaux peuvent être appelés directement à l'aide du bouton ou d'un lien, voici l'utilisation simple :

<button type="button" data-toggle="modal" data-target="#myModal">打开对话框</button>
<a href="#myModal" rel="external nofollow" role="button" class="btn" data-toggle="modal">打开对话框</button>

2. Utilisez l'option distante pour laisser la boîte de dialogue modale charger la page dans .modal-body

Il existe deux méthodes, l’une consiste à utiliser des liens et l’autre à utiliser des scripts.

2.1 Utiliser les liens

<a href="page.jsp" rel="external nofollow" data-toggle="modal" data-target="#myModal">打开对话框</a>

Lorsque vous cliquez sur ce lien, le contenu de page.jsp est chargé dans le corps .modal de la boîte de dialogue et la boîte de dialogue s'affiche.

2.2 Utiliser des scripts

$("#myModal").modal({
 remote: "page.jsp"
});

L'effet de ce script est le même que celui de l'utilisation d'un lien. Lorsque ce script est exécuté, le contenu de page.jsp sera chargé dans le corps .modal de la boîte de dialogue et la boîte de dialogue sera affichée.

Derrière ces deux méthodes, Bootstrap appelle la méthode load() de jQuery pour charger page.jsp depuis le serveur. page. Mais ce chargement n'aura lieu qu'une seule fois, quel que soit le nombre de fois que vous cliquerez sur le lien ou exécuterez le script, même si les modifications sont transmises au serveur distant. La valeur de l'option, la boîte de dialogue ne rechargera pas la page, ce qui est un véritable casse-tête. Cependant, le problème peut encore être résolu.

3. Supprimez les données pour que la boîte de dialogue puisse recharger la page à chaque ouverture

Après avoir recherché dans et consulté les documents pertinents, j'ai trouvé qu'il suffit d'écrire une déclaration dans l'événement caché de la boîte de dialogue :

$("#myModal").on("hidden", function() {
 $(this).removeData("modal");
});

Vous pouvez également supprimer les données avant d'ouvrir la boîte de dialogue à chaque fois, et l'effet est le même.

Remarque : le code ci-dessus est basé sur Bootstrap v2. Si vous utilisez Bootstrap v3, le HTML de la boîte de dialogue modale et la manière d'écrire l'événement sont légèrement différents. Par exemple, pour l'événement masqué ci-dessus, il doit être écrit comme suit :

$("#myModal").on("hidden.bs.modal", function() {
 $(this).removeData("bs.modal");
});

Je crois que vous l'avez lu. Vous maîtrisez la méthode dans le cas de cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!