iframe에서 모달 대화 상자를 여는 중입니다. 모달 대화 상자를 여는 대화 상자는 iframe에 있지만 모달 div는 부모 페이지에 있습니다. 그러나 성공하지 못했습니다.부모 창으로 iframe에서 모달 창 열기
내가 부모 페이지에 아래와 같이있다 : - 프레임-1.html에서
<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>
그리고 코드는 아래와 같다 : -
<!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>
저를 도와주세요. 어떤 도움을받을 수 있습니다. 미리 감사드립니다.
: 나는 당신의 코드 (및 localY하지 서버) 테스트 할 때
귀하의 질문에 답변하고 답변하기 전에 : http://stackoverflow.com/a/951987/6681296 – JBartus
공유 링크를 읽은 후 미안하지만 문제를 해결할 수 없습니다. – Coddder