jQuery+layui实现点击按钮出现Iframe窗口效果

最新推荐文章于 2023-07-28 17:00:03 发布

风尚云网

最新推荐文章于 2023-07-28 17:00:03 发布

阅读量2.3k

点赞数 3

分类专栏：风尚的笔记文章标签：前端 javascript layui jquery 组件化

本文链接：https://blog.csdn.net/zsx0806/article/details/121779266

版权

风尚的笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

引入jQuery，引入layUI

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实现本页面渲染</title>
	</head>
	<!-- 引入jQuery -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<!-- 引入 layui.css -->
	<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
	<!-- 引入 layui.js -->
	<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

	<body>
		jQuery+layui实现本页面渲染别的网页
		<button type="button" id="parentIframe">点击弹ifrem</button>
	</body>

	<script type="text/javascript">
		//一个iframe层
		$('#parentIframe').on('click', function() {
			layer.open({
				type: 2,
				title: '风尚云网框架演示', //ifrem的标题
				maxmin: true, //最小化
				shadeClose: true, //点击遮罩关闭层
				area: ['100%', '100%'], //大小
				content: 'http://1813783665.3vzhuji.net/' //打开的url
			});
		})
	</script>
</html>