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

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

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

Answer 6

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

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