根据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> 

改变