我已经尝试找出如何真正做到这一点,但代码总是不同,没有任何效果。我总是以破坏链接或弹出窗口本身而告终。所以,我在这里得到了这段代码:
.popup {
position:fixed;
display:none;
top:0px;
left:0px;
width:100%;
height:100%;}
#displaybox {
width:460px;
margin:50px auto;
background-color:#000000;}
.displaybox {
display:block;
position:relative;
overflow:hidden;
height:800px;
width:550px;}
.displaybox iframe {
position:absolute;}
<link><a id="object">click link</a></link>
<script>
$(function(){
$("link a").click(function(){
id = $(this).attr("id");
$(".popup:not(."+id+")").fadeOut(); $(".popup."+id).fadeIn();
});
$("a.close").click(function(){
$(".popup").fadeOut();
});
});
</script>
<div class="popup object">
<div id="displaybox"><a class="close">x</a>
<br>
<div class="displaybox"><iframe src="{theiframeblock}" height="800" frameborder="0" width="550"></iframe></div>
</div>
而且我只想在单击“单击链接”链接时加载 iframe block 。我该如何为此更改脚本?有什么建议么? :)
最佳答案
更新
我提供的片段非常简单,所以我假设您在测试它时,要么遗漏了一些代码,要么以错误的顺序放置了一些东西,或者您的网站以某种方式干扰了。
因此,我所做的是将主页 ( index.html
) 设为包含其独立运行所需的一切内容。我还制作了第二页 ( target.html
),这是驻留在 iframe 中的测试页。
这是 DEMO
通过以下方式简化您的功能:
- 给你的弹窗一个id
#tgt
- 删除了
<link>
元素;这不是 anchor<a>
它基本上用于外部样式表 - 给每个 anchor 一个空的
href
属性 - 放置
e.preventDefault()
在每个点击功能中避免<a>
跳转到某个位置的默认行为。 - 替换了 iframe 的
src={..}
带 Root过的模板,您可以将其改回原样,我只是这样做了,以便演示可以运行。
$(function() {
$("a.open").click(function(e) {
$('#tgt').fadeIn();
e.preventDefault();
});
$("a.close").click(function(e) {
$("#tgt").fadeOut();
e.preventDefault();
});
});
.popup {
position: fixed;
display: none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#displaybox {
width: 460px;
margin: 50px auto;
background-color: #000000;
}
.displaybox {
display: block;
position: relative;
overflow: hidden;
height: 800px;
width: 550px;
}
.displaybox iframe {
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="" id="object" class="open" target="tgt">click link</a>
<div id="tgt" class="popup object">
<div id="displaybox"><a href="" class="close">X</a>
<br>
<div class="displaybox">
<iframe src="/" height="800" frameborder="0" width="550"></iframe>
</div>
</div>
关于javascript - 如何仅在单击时加载 iframe block ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35242125/