在React对话框模型中打开iframe时,锚标签href不起作用 [英] Anchor tags href isn't working when iframe is opened in a react dialog model
本文介绍了在React对话框模型中打开iframe时,锚标签href不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我们在模型对话框中打开了iframe
.在iframe
中,我们正在加载document
.该文件也是和html页面.文档中的<a>
标记未导航至其href
中提到的id
.
We have opened an iframe
in model dialog. In the iframe
we are loading a document
. The document is also and html page. The <a>
tags in the document are not navigating to the id
mentioned in their href
.
只是html
文档中的一个示例.
下面是<a>
示例,
Just a sample from the html
document.
Below is the <a>
example,
<a data-custom-class="link" href="#infoshare">
2. WILL YOUR INFORMATION BE SHARED WITH ANYONE?
</a>
<p id="infoshare" style="font-size:15px;">
<span style="color: rgb(0, 0, 0);">
<strong>
<span style="font-size: 19px;">
<span data-custom-class="heading_1">
2. WILL YOUR INFORMATION BE SHARED WITH ANYONE?
</span>
</span>
</strong>
</span>
</p>
在<a>
上单击时,应导航到<p>
.
Onclick of the <a>
it should navigate to the <p>
.
但是,当在浏览器中浏览URL时,它可以完美地工作.
Though, It works perfectly when the url is browsed in the browser.
但是在对话框模型中不起作用.
But Doesn't work in the dialog model.
推荐答案
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("infoshare");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<a data-custom-class="link" id="infoshare">
2. WILL YOUR INFORMATION BE SHARED WITH ANYONE?
</a>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
这篇关于在React对话框模型中打开iframe时,锚标签href不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文