根據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;
}

這項變更可以正常運作