它是用

<div href="a" class="btn btn-primary atn1">查看更多</div>

對上後面的

<div class="awri1">
<div class="wri1">
<div class="no"><img src="img/close.png" alt=""></div>
<iframe src="iframe1/a.html" width="100%" height="100%" frameborder="0"></iframe>
</div>
</div>

在

<script src="js/index.js"></script>

載入設定按下觸發事件 (使用jQuery)

$(".atn"+i).click(function(){
	$(".awri"+i).fadeIn();
});

關閉的按鈕是這個

$(".no").click(function(){
	 $(".awri"+i+",.bwri"+i+",.cwri"+i+",.dwri"+i+",.ewri"+i+",.fwri"+i+",.gwri"+i).fadeOut();
});

這樣解說夠清楚了吧?

設iframe的src的做法
優點是相關的code與html可以減少到只留1份, 用戶端瀏覽器可以稍微省點記憶體
缺點是切換src時會需要載入的時間

你給的範例
是變成一堆iframe都在讀網頁時預先載入, 缺點是會多消耗點記憶體
優點是按下【查看更多】時不用再等網頁載入

在查看更多時點擊時觸發跳窗
並修改iframe的src屬性就好
假設你iframe的ID叫ifID

var ifObj = document.getElementById('ifId');
ifObj.src = '你要的URL';

不理解這為何不用
Bootstarp modal彈跳視窗再內容iframe