layui 把弹出窗口中的某些值传回原来网页上

最新推荐文章于 2023-07-14 20:15:02 发布

我是高手高手高高手

最新推荐文章于 2023-07-14 20:15:02 发布

阅读量2.6k

点赞数

分类专栏： JS技巧 jQuery layui插件

本文链接：https://blog.csdn.net/haibo0668/article/details/70937651

版权

JS技巧同时被 3 个专栏收录

244 篇文章 3 订阅

订阅专栏

jQuery

128 篇文章 1 订阅

订阅专栏

layui插件

86 篇文章 6 订阅

订阅专栏

在网页(A.html)弹出窗口：弹出窗口中引用iframe网页(B.html)

关闭弹出窗口，然后把引用网页上的某些传值传回原来(A.html)网页上

index代码


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layer-更懂你的web弹窗解决方案</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
  <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
  <script src="layer/layer.js"></script>
</head>
<body>

<div class="box" style="text-align:center">
<!--<a href="javascript:;" id="vide_cl">关于</a>-->
<a class="layui-btn layui-btn-primary layer-demolist" href="javascript:;" id="parentIframe">iframe-点击弹出窗口</a>
<p>改更内容<input id="name2" value=""></p>
</div>

<script>
$('#parentIframe').on('click', function(){
	layer.ready(function(){ 
	  layer.open({
		type: 2,
		title: '欢迎页',
		maxmin: true,
		area: ['800px', '500px'],
		content: 'demo2.html',
		end: function(){
		  layer.tips('Hi', '#about', {tips: 1})
		}
	  });
	});
});
</script>
</body>
</html>

demo2代码


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layer-更懂你的web弹窗解决方案</title>

  <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
  <script src="layer/layer.js"></script>
</head>
<body>

<div class="box" style="text-align:center">
<a href="javascript:;" id="vide_cl">关于</a>

</div>

00
<div>
<p><strong><label>请在关闭该层之前留个标记：</label></strong><input id="name" value="000"></p>

<button id="add">让层自适应iframe</button>
<button id="new">在父层弹出一个层</button>
<button id="transmit">给父页面传值</button>
<button id="closeIframe">关闭iframe</button>
</div>
<!--弹出框js css-->
<script>
		var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

		//让层自适应iframe
		$('#add').on('click', function(){
			$('body').append('插入很多酱油。插入很多酱油。插入很多酱油。插入很多酱油。插入很多酱油。插入很多酱油。插入很多酱油。');
			parent.layer.iframeAuto(index);
		});
		//在父层弹出一个层
		$('#new').on('click', function(){
			parent.layer.msg('Hi, man', {shade: 0.3})
		});
		//给父页面传值
		$('#transmit').on('click', function(){
			parent.$('#parentIframe').text('我被改变了');
			parent.layer.tips('Look here', '#parentIframe', {time: 5000});
			parent.layer.close(index);
		});
		//关闭iframe
		$('#closeIframe').click(function(){
			var t_val = $('#name').val();
			if(t_val === ''){
				parent.layer.msg('请填写标记');
				return;
			}
			parent.layer.msg('您将标记 [ ' +t_val + ' ] 成功传送给了父窗口');
			parent.$('#name2').val(t_val);
			parent.layer.close(index);
		});
</script>
<!--弹出框js css-->	
</body>
</html>

演示源码：

百度网盘：https://pan.baidu.com/s/1miLpiAW

CSDN：http://download.csdn.net/detail/haibo0668/9828815