SimpleModal charge externe page HTML dans la boîte de dialogue
Est-il possible de charger un fichier HTML externe dans une variable et ensuite utiliser cette variable pour charger le SimpleModal dialogue? Quelque chose comme ceci:
$(document).ready(function($) {
var externalPage $.get("Renderer.htm");
$('#basic-modal .basic').click(function(e) {
$(externalPage).modal();
return false;
});
});
Une autre solution (qui fonctionne) est de charger le fichier HTML externe caché dans un div et puis l'utiliser pour charger la boîte de dialogue.
$(document).ready(function($) {
$('#simplemodal-content').hide(); //or hide in css
$('#simplemodal-content').load("Renderer.htm");
$('#basic-modal .basic').click(function(e) {
$('#simplemodal-content').modal();
return false;
});
});
Cependant, si je prends cette approche, la css définie pour la page externe peut interférer avec ma page locale et donc de modifier la mise en page, qui est pas souhaité.
Si il y a une 3ème solution qui est mieux que l'une de ces approches, s'il vous plaît partager.
PS: malheureusement, il a aussi parfaitement IE6.
Vous devez vous connecter pour publier un commentaire.
Je pense que vous aurez besoin d'utiliser une iframe pour accomplir cette tâche. Même si vous êtes en mesure de charger le contenu de la page dans une variable une fois que vous l'afficher sur la page, css et javascript va commencer à affecter votre page.
Quelque chose comme ça pourrait fonctionner:
Si vous ne voulez pas utiliser l'iframe directement comme modale de l'objet, mais j'espère que c'est assez pour vous obtenir pointé dans la bonne direction.
Plutôt que de se charger de l'ensemble du fichier html, charge qu'une partie d'elle.
Cela va charger le corps uniquement, à l'exclusion de toute CSS ou de scripts.
La réponse de Keare est en effet utile de séparer les css/js du html externe de sorte qu'il n'interfère pas avec la page en cours. Il peut également être utilisé comme une base pour le dialogue modale.
Comme une alternative je l'ai aussi trouvé cette solution qui utilise une iframe dans la boîte de dialogue modale lui-même. Dans ce cas, vous pourriez avoir un problème avec les barres de défilement, ce qui est déjà résolu ici: http://bit.ly/anbyf2
Tandis que le roulement de votre propre solution est idéal pour l'apprentissage, et peut éventuellement être plus efficace, il y a beaucoup de plugins jQuery qui le font (et ont résolu tous les problèmes pour vous). Exemples:
http://colorpowered.com/colorbox/ et http://fancybox.net/
Un commentaire sur le SimpleModal site indique que le code suivant devrait fonctionner: