记录：点击a标签显示iframe弹窗

最新推荐文章于 2024-05-23 19:58:37 发布

汪同学丶

最新推荐文章于 2024-05-23 19:58:37 发布

阅读量2.4k

点赞数 1

分类专栏：前端 HTML+CSS+JAVASCRIPT 文章标签： a、iframe

本文链接：https://blog.csdn.net/weixin_44402694/article/details/100595944

版权

前端 HTML+CSS+JAVASCRIPT 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在当前页面显示iframe弹窗，a链接跳转

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div id="con" style="width: 800px; height: 700px; border: 2px solid red; padding: 10px 0 10px 10px; display: none; overflow: hidden;">
	<i id="close" style="width: 30px; height: 30px; background: #ccc; color: #fff; float: right; font-size: 26px; line-height: 30px; text-align: center; font-style: normal;">×</i>
	<iframe id="myFrameId" style="width: 100%; height: 100%;" name="myFrameName" scrolling="" frameborder="0"></iframe> 
</div>
<div id="ac">
	跳转
	<a id="a" href="http://www.hzgufen.com" target="myFrameName"></a> 
</div>
<script type="text/javascript">
	document.getElementById('ac').onclick = function () {
		document.getElementById('con').style.display = 'block'
		document.getElementById('a').click()
	}
	document.getElementById('close').onclick = function () {
		document.getElementById('con').style.display = 'none'
	}
</script>		
</body>
</html>

汪同学丶

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
记录：点击a标签显示iframe弹窗

在当前页面显示iframe弹窗，a链接跳转<!DOCTYPE html><html><head> <title></title></head><body><div id="con" style="width: 1000px; height: 700px; border: 2px solid re...
复制链接

扫一扫

专栏目录