javascript - SimpleModal は、ダイアログで外部 HTML ページを読み込みます

Question

外部 HTML ファイルを変数にロードし、この変数を使用して SimpleModal ダイアログをロードすることは可能ですか? このようなもの：

$(document).ready(function($) {
    var externalPage $.get("Renderer.htm");

    $('#basic-modal .basic').click(function(e) {
        $(externalPage).modal();

        return false;
    });
});

別の解決策 (有効) は、非表示の div に外部 HTML ファイルをロードし、これを使用してダイアログをロードすることです。

$(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;
    });
});

ただし、このアプローチを取ると、外部ページ用に定義された css がローカル ページに干渉し、レイアウトが変更される可能性がありますが、これは望ましくありません。

これらのアプローチよりも優れた 3 番目のソリューションがある場合は、共有してください。

PS: 残念ながら、IE6 でも完全に動作する必要があります。

Answer 1

これを実現するには、iframeを使用する必要があると思います。ページに表示した後、ページのコンテンツを変数にロードできる場合でも、そのcssとjavascriptがページに影響を及ぼし始めます。

このようなものが機能する可能性があります：

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

iframeをモーダルオブジェクトとして直接使用することはおそらくないでしょうが、これで正しい方向を示すのに十分であることを願っています。

Answer 2

Rather than loading the entire html file, load just one part of it.

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

This will load the body only, excluding any CSS or scripts.

Answer 3

Keareの答えは、css / jsを外部のhtmlから分離して、現在のページに干渉しないようにするのに実際に役立ちます。モーダルダイアログのベースとしても使用できます。

別の方法として、モーダルダイアログ自体でiframeを使用するこのソリューションも見つけました。この場合、スクロールバーに問題がある可能性があります。これはすでにここで解決されています：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

独自のソリューションをローリングすることは学習に最適であり、おそらくより効率的かもしれませんが、これを行う（そしてすべての問題を解決した）jQueryプラグインはたくさんあります。例は次のとおりです。

http://colorpowered.com/colorbox/およびhttp://fancybox.net/

Answer 5

SimpleModal サイトのコメントは、次のコードが機能するはずであることを示しています。

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

Answer 6

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