SimpleModal在對話框中加載外部HTML頁面

是否可以將外部HTML文件加載到變量中，然後使用此變量加載SimpleModal對話框？事情是這樣的：SimpleModal在對話框中加載外部HTML頁面

$(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中完美工作。

來源

2010-04-30 Bart

我認爲你將需要使用iframe來實現這一點。即使您可以在頁面上顯示該頁面時將該頁面的內容加載到變量中，其CSS和JavaScript也將開始影響您的頁面。

像這樣的東西可能會奏效：

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

雖然你可能不希望直接使用iframe和模態的對象，但我希望這是足以讓你指出正確的方向。

來源

2010-04-30 16:16:59 jdcantrell

是開始了良好的基礎。正確分離css/js。我還在回覆中添加了一個替代解決方案。 – Bart 2010-05-03 13:05:48

不是加載整個html文件，只加載它的一部分。

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

這將只加載主體，不包括任何CSS或腳本。

來源

2010-04-30 18:32:11 Mark

這樣，當我將它放置在模態對話框中時，我將不會擁有該頁面的CSS。 – Bart 2010-05-01 12:30:47

哦，如果你需要css，那麼你應該按照Keare的回答使用iframe。如果你不能使用iframe，那麼你應該重做你的CSS，以便它們兼容。 – Mark 2010-05-01 15:56:52

Keare的答案對於從外部html分離css/js確實很有用，所以它不會干擾當前頁面。它也可以用作模態對話框的基礎。

作爲一種替代方案，我也發現這種解決方案在模態對話框中使用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; 
});

來源

2010-05-03 13:04:59 Bart

雖然滾動自己的解決方案是偉大的學習，可能更有效率，有大量的jQuery插件這樣做（並已爲您解決了所有問題）。例子包括：

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

來源

2010-05-03 13:08:57

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

來源

2011-03-21 14:28:48 Take

請您詳細說明一下嗎？ – hitautodestruct 2012-11-26 18:57:35

在SimpleModal站點A comment表明，下面的代碼應該工作：

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

來源

2011-08-31 22:33:15 JW8

SimpleModal在對話框中加載外部HTML頁面

回答

相關問題