SimpleModal загрузить внешнюю HTML-страницу в диалоге

Question

Можно ли загрузить внешний HTML-файл в переменную, а затем использовать эту переменную для загрузки диалога SimpleModal? Примерно так:

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

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

        return false;
    });
});

Альтернативное решение (которое работает) - загрузка внешнего HTML-файла в скрытый div и затем использование этого для загрузки диалога.

$(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, заданный для внешней страницы, может помешать моей локальной странице и, таким образом, изменить макет, который нежелателен .

Если есть третье решение, которое лучше этих подходов, пожалуйста, поделитесь.

PS: к сожалению, он также должен отлично работать в IE6.

Answer 1

Я думаю, что для этого вам понадобится iframe. Даже если вы сможете загрузить содержимое страницы в переменную после ее отображения на странице, ее css и javascript начнут влиять на вашу страницу.

Что-то вроде этого может работать:

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

Хотя вы, вероятно, не захотите использовать iframe непосредственно в качестве модального объекта, но я надеюсь, что этого достаточно, чтобы вы указали в правильном направлении.

Answer 2

Вместо загрузки всего HTML-файла, загрузите только одну его часть.

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

Это загрузит только тело, исключая любые CSS или скрипты.

Answer 3

A комментарий на сайте SimpleModal указывает, что следующий код должен работать:

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

Answer 4

Хотя ваше собственное решение отлично подходит для обучения и, возможно, может быть более эффективным, существует множество плагинов jQuery, которые делают это (и решили все проблемы за вас). Примеры включают в себя:

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

Answer 5

Ответ 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 6

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