SimpleModal charger la page HTML externe dans la boîte de dialogue

Question

Est-il possible de charger un fichier HTML externe dans une variable, puis d'utiliser cette variable pour charger la boîte de dialogue SimpleModal? 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 dans un div caché puis utilisez cette option 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 ainsi changer la mise en page, qui est pas souhaité.

S'il existe une 3ème solution meilleure que ces approches, partagez. PS: malheureusement, il doit également fonctionner parfaitement avec IE6.

Answer 1

Je pense que vous devrez utiliser un iframe pour accomplir ceci. Même si vous êtes en mesure de charger le contenu de la page dans une variable une fois que vous l'affichez sur la page, ses css et javascript commenceront à affecter votre page.

Quelque chose comme cela pourrait fonctionner:

$('#iframeElement').attr('src','Renderer.html') 
$('#iframeElement').modal() 

Bien que vous ne voudrez probablement pas utiliser l'iframe directement comme objet modal, mais j'espère que cela est suffisant pour vous être pointées dans la bonne direction.

Answer 2

Plutôt que de charger le fichier html entier, n'en chargez qu'une partie.

$('#simplemodal-content').load('Renderer.htm body'); 

Ceci ne chargera que le corps, excluant tout CSS ou script.

Answer 3

La réponse de Keare est en effet utile pour séparer le css/js du html externe afin qu'il n'interfère pas avec la page en cours. Il peut également être utilisé comme base pour le dialogue modal. Comme alternative, j'ai également trouvé cette solution qui utilise une iframe dans la boîte de dialogue modale elle-même. Dans ce cas, vous pourriez avoir un problème avec les barres de défilement, qui est déjà résolu ici: http://bit.ly/anbyf2

$('#basic-modal .basic').click(function(e) { 
    var src = "http://www.google.com"; 
    $.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', { 
     closeHTML: "", 
     containerCss: { 
      backgroundColor: "#fff", 
      borderColor: "#fff", 
      height: 456, 
      padding: 0, 
      width: 834 
     }, 
     overlayClose: true 
    }); 

    return false; 
}); 

Answer 4

Alors que rouler votre propre solution est idéale pour l'apprentissage, et peut éventuellement être plus efficace, il y a beaucoup de jQuery plug-ins cela fait (et a résolu tous les problèmes pour vous). Voici quelques exemples:

http://colorpowered.com/colorbox/ et http://fancybox.net/

Answer 5

$('#iframeElement').load('Renderer.html'); 

Answer 6

A comment sur le site SimpleModal indique que le code devrait fonctionner:

$.get('page.html', function(data) { $.modal(data); });