根據iframe內容調整模式

Question

我有一個模式，我想根據iframe內容大小調整大小。

我可以使模態大，但iframe的內容仍然與滾動條來。

這裏是github頁面的鏈接。點擊左上角的模式「One Minute Story」鏈接。

page

我想模態被精確地居中和iframe中的內容是一個SVG圖表來完美地在其內部，而不滾動。

<div id="story-modal" class="modal hide fade" > 
    <div class="modal-header"> 
     <a href="#" class="close">&times;</a> 
     <h3>1 Minute Story!</h3> 
     </div> 

    <div id="storyChart" > 

    </div> 
<script type="text/javascript">$("#storyChart").append($("<iframe />").attr("src", "/frame.html")); 
</script> 

</div> 

Answer 1

認沽下面的代碼

爲H1一些寬度，因爲其水平滾動來了

.container h1{ 
width: 100%; 
position: relative; 
/* left: -100px; */ 
letter-spacing: -1px; 
line-height: 60px; 
font-size: 60px; 
font-weight: 100; 
margin: 0px 0 50px 0; 
text-shadow: 0 1px 0 #fff; 
} 

它與這個正常工作的書面

#story-modal { 
height: 500px; 
width: 590px; 
} 
#storyChart { 
height: auto; 
width: 100%; 
position: relative; 
overflow-y: hidden; 
overflow-x: hidden; 
} 
Put this code in iframe 
<iframe src="/frame.html" width="200" height="200" style=" 
    width: 100%; 
    height: 520px;"></iframe> 

改變