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

Можно ли загрузить внешний файл 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.


javascript jquery css modal-dialog simplemodal
person Bart    schedule 30.04.2010    source источник

Ответы (6)


arrow_upward
3
arrow_downward

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

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

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

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

person jdcantrell    schedule 30.04.2010
comment
Является хорошей базой для начала. Правильно разделяет css/js. Я также добавил альтернативное решение в ответ. - person Bart; 03.05.2010

arrow_upward
2
arrow_downward

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

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

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

person Mark    schedule 30.04.2010
comment
Таким образом, у меня не будет css для страницы, когда я помещу ее в модальное диалоговое окно. - person Bart; 01.05.2010
comment
О, если вам нужен css, вы должны использовать iframe в соответствии с ответом Кира. Если вы не можете использовать iframe, вам следует переделать CSS, чтобы они были совместимы. - person Mark; 01.05.2010

arrow_upward
1
arrow_downward

Ответ 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;
});
person Bart    schedule 03.05.2010

arrow_upward
1
arrow_downward

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

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

person Dan Diplo    schedule 03.05.2010

arrow_upward
1
arrow_downward

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

$.get('page.html', function(data) { $.modal(data); });
person JW8    schedule 31.08.2011

arrow_upward

arrow_downward

person    schedule
comment
Не могли бы вы уточнить? - person hitautodestruct; 26.11.2012