This website structure looks like:
`--main.html
`--dialog.html
`--folder
`--iframe.html
The code for each page is as follows:
main.html:
<html>
<head>
<script type="text/javascript">
function testframe() {
var doc = document.getElementById("frame").contentWindow;
doc.show();
}
</script>
</head>
<body>
<iframe src="folder/iframe.html" id="frame"></iframe>
<br/>
<button onclick="testframe()">test</button>
</body>
</html>
dialog.html:
<html>
<head>
</head>
<body>
This is a modal dialog!
</body>
</html>
iframe.html:
<html>
<head>
<script type="text/javascript">
function show() {
showModalDialog('../dialog.html');
}
</script>
</head>
<body>
this is an iframe
<br />
<button onclick="show()">show dialog</button>
</body>
</html>
Clicking the "show dialog" button within the iframe displays the modal dialog correctly.
However, clicking the "test" button outside the iframe displays the modal dialog incorrectly.
How can I rectify the issue with displaying the correct content in the dialog when clicking the "test" button outside the iframe?