根据iframe内容调整模式大小

Question

我有一个要根据iframe内容大小调整大小的模式。

我可以将模式设为大，但iframe的内容仍带有滚动条。

这是指向github页面的链接。 点击左上方的模式“一分钟故事”链接。

页

我希望模态精确居中，而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

输入以下代码

#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>

对于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;
}

这项变更可以正常运作