我想在iframe中打開模式對話框(打開模式對話框的按鈕是在iframe中,但模態div在父頁面中)。但沒有成功。從iframe打開模式窗口進入父窗口
我有一個父頁面如下圖所示: -
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="basic.js"></script>
<script src="jquery.simplemodal.js"></script>
</head>
<body>
<iframe src="Frame-1.html" width="400" height="400"></iframe>
<iframe src="Frame-2.html" width="400" height="400"></iframe>
<div id="modalPopup" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
</body>
</html>
和代碼在幀-1.HTML是象下面這樣: -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modal popup</title>
<link rel="stylesheet" href="./bootstrap.min.css" />
<script src="./jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="./bootstrap.min.js" type="text/javascript"></script>
<script src="basic.js"></script>
<script src="jquery.simplemodal.js"></script>
<script>
$(document).on('hide.bs.modal', '#modalPopup', function() {
alert('');
//Do stuff here
});
//alert($(window.parent.document).find('#modalPopup').modal);
$(window.parent.document).find('#modalPopup').modal({
appendTo: $(window.parent.document).find('body'),
overlayCss: { backgroundColor: "#333" }, // Optional overlay style
overlayClose: true,
});
// Set overlay's width
$(window.parent.document).find('#simplemodal-overlay').css('width', '100%');
</script>
</head>
<body>
<button type="button" class="btn" name="btn" id="btn" data-target="#modalPopup"
data-toggle="modal" data-backdrop="static" data-keyboard="false" href="./Popup.html">
Click ME!
</button>
</body>
</html>
請幫助我。任何幫助是可觀的。提前致謝。
您的問題已被詢問和回答之前: http://stackoverflow.com/a/951987/6681296 – JBartus
對不起,但我無法在閱讀您的共享鏈接後解決我的問題。 – Coddder