artdialog 弹出页面 iframe

位置:首页>文章>详情   分类: 教程分享 > Java教程   阅读(1232)   2023-03-28 11:29:14
artdialog 弹出页面iframe
artdialog 弹出页面iframe

一、artdialog的安装引入

     首先去artdialog官网或者去GitHub下载artDialog的相关文件,并且将核心文件和依赖的jQuery文件导入自己使用的HTML页面中
<!-- 引入需要的相关文件 -->
<script type="text/javascript" src="../../libs/jQuery/jquery.js"></script>
<script src="../../libs/artDialog/v4.1.7/artDialog.source.js?skin=default"></script>
<script src="../../libs/artDialog/v4.1.7/plugins/iframeTools.source.js"></script>
 

二、弹出页面的编写 

    编写一个你需要弹出的页面,这里我编辑一个简单的HTML页面作为待会需要通过artDialog弹出页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试的iframe页面</title>
</head>
<body>
<h1>这个页面是由artDialog通过iframe打开的</h1>
<p>当前页面是一个见得demo页面</p>
</body>
</html>

三、编写artDialog弹出页面 iframe

    artDialog如果要弹出iframe页面必须满足一下几点:
  1.     artDialog版本必须是4.x的版本,本文使用4.1.7,最新的已经7.0.0了,但是4.x后的版本放弃了iframe的支持;
  2. 需要引入artDialog版本的iframe插件,也就上面第一点里面的iframeTools.source.js
    编写一个弹出的页面:
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo artDialog</title>
</head>
<body>

<button id="alert-btn">弹出页面按钮</button>
<!-- 引入需要的相关文件 -->
<script type="text/javascript" src="../../libs/jQuery/jquery.js"></script>
<script src="../../libs/artDialog/v4.1.7/artDialog.source.js?skin=default"></script>
<script src="../../libs/artDialog/v4.1.7/plugins/iframeTools.source.js"></script>
<script type="text/javascript">
$(function(){
	//绑定按钮事件
	$('#alert-btn').click(function(){
		art.dialog.open('demo-iframe-a.html', {
			title:'artDialog 弹出页面 iframe 这个是标题',
			ok:function(){
				alert('您点击的确定');
				return true;
			},
			cancel:function(){
				alert('您点击的取消');
				return false;
			},
			okVal:'确定',
			cancelVal:'取消',
			width:'600px',
			height:'400px'
		}, false);
	});
})
</script>

</body>
</html>


四、artdialog iframe弹出页面传递值

本功能点主要讲解在artDialog弹出iframe中,如何从iframe中传递值给弹出的父级页面。
4.1.修改弹出页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试的iframe页面</title>
</head>
<body>
<h1>这个页面是由artDialog通过iframe打开的</h1>
<p>当前页面是一个见得demo页面</p>
<button id="btn-test">点击我关闭并且传递值</button>
<!-- 引入需要的相关文件 -->
<script type="text/javascript" src="../../libs/jQuery/jquery.js"></script>
<script src="../../libs/artDialog/v4.1.7/artDialog.source.js?skin=default"></script>
<script src="../../libs/artDialog/v4.1.7/plugins/iframeTools.source.js"></script>
<script type="text/javascript">
$(function() {
	
	//绑定点击事件
	$('#btn-test').click(function() {
		//获取父级
		var win = art.dialog.open.origin;
		//设置父级变量
	    win.artdialog_return ='你好,这段话来自artDialog弹出的iframe页面。';
	    //关闭弹窗
		art.dialog.close();
	});
	 
})
</script>
</body>
</html>
4.2修改主页代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo artDialog</title>
</head>
<body>

<button id="alert-btn">弹出页面按钮</button>
<!-- 引入需要的相关文件 -->
<script type="text/javascript" src="../../libs/jQuery/jquery.js"></script>
<script src="../../libs/artDialog/v4.1.7/artDialog.source.js?skin=default"></script>
<script src="../../libs/artDialog/v4.1.7/plugins/iframeTools.source.js"></script>
<script type="text/javascript">
$(function(){
	//绑定按钮事件
	$('#alert-btn').click(function(){
		//定义个变量接收iframe弹窗页面的回调值
		artdialog_return="";//不使用var定义标示全局变量
		art.dialog.open('demo-iframe-a.html', {
			title:'artDialog 弹出页面 iframe 这个是标题',
			ok:function(){//确定按钮事件
				alert('您点击的确定');
				return true;
			},
			cancel:function(){//取消按钮事件
				alert('您点击的取消');
				return false;
			},
			okVal:'确定',
			cancelVal:'取消',
			width:'600px',
			height:'400px',
			close:function(){//关闭弹窗事件
				alert(artdialog_return);
			}
		}, false);
	});
})
</script>

</body>
</html>

执行上面的代码结果图:
iframe传递值
至此,artDialog弹出页面 iframe已经完结,有任何疑问请指出。感谢
地址:https://www.leftso.com/article/211.html

相关阅读

artdialog 弹出页面iframe,artDialog,artDialog弹出页面
artdialog怎么使用,artdialog
artDialog v7 使用说明及API文档,artDialog ,artDialog具有bootstrap风格的弹窗组件
layer.prompt弹出框设置默认值,layer.prompt弹出框如何默认值,偶尔需要给layer的弹出设置默认值这里详细讲解一下
1.alt+insert可以弹出Getter and Setter构造函数实现接口方法重写父类方法2.CTRL+F12 弹出所有方法 可以弹出当前文件的方法3.CTRL+ALT+B / CTRL...
一、配置idea setter模板首先 按快捷键   Alt+Insert 弹出generater 对话框​弹出对话框​点击箭头指的位置,弹出以下内容:​上面首先点击绿色的‘+’号添加一个模板,...
jsp页面无法识别el表达式的解决方案,今天在写一个springmvc的小demo时,碰到一个问题,在jsp页面中书写为user.username的表达式语言,在浏览器页面中仍然显示为{user...
tomcat6/7/8配置启用gzip压缩页面内容
本文主要讲解spring boot框架整合mybaties后,如何打印出mybaties的sql语句以及参数列表