一：
第一个问题：由于对于前端js知识不是很熟悉，在开始写弹窗时不知道使用那种方法，后面找到实现弹窗方法：
1、需要引入<g:javascript src="jquery/jquery.js"/>，但不能再页面重复引入<g:javascript src="jquery/jquery.min.js"/>，否则会报错（实现不了）
2、在主页面预留位置给子窗口，例如定义：
<div> ....... <div id ='win'></div> </div>
3、在按钮（自定义）处点击后在函数处实现：
function importData(){ jQuery('#win').window({ title : '批量导入', width:800, height:440, modal:true, //true表示弹窗出现后主页面无法操作 minimizable :false, maximizable:false, collapsible:false, content:"<iframe src='${request.contextPath}/xxx/xxx' height='100%' width='100%' frameborder='0px' style='border: solid 0px;' ></iframe>", onClose:function(){ $('#lt').datagrid('reload'); } }); }
注意：代码中的src表示可跳转到子窗口内容的路径（本人是利用后台action进行跳转）
4、弹窗出现后如何更换标题，子窗口内容，高度，宽度等等：
parent.$('#win').window("setTitle", "修改用户");//更换标题 parent.$("#win").window('resize', {width:770, height:550});//更换宽高 parent.$("#win").window('center');//更换出现位置
子窗口内容可以在子窗口页面上直接跳转
5、如何关闭
//关闭窗口（#win是主页面的div） parent.jQuery('#win').window('close') //主页面重新加载 parent.location.reload();
额外知识：
函数表示加载页面随即加载该函数，可以在里面做初始化定时器等等功能。
<script> jQuery(document).ready(function (){ time(); }) function time(){ if(${flash.message!=null}){ timeOutValue = timeOutValue - 1; if (timeOutValue <= 0) { timeOutValue = maxTime; jQuery("#msg").hide(); } setTimeout("time()", 1000); //每隔一秒监听一次 } } </script>
操作进行转圈：
<style> .toast { display: none; position: fixed; flex-direction: column; justify-content: center; align-items: center; width: 9rem; height: 9rem; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: rgba(0,0,0,0.2); border-radius: 1rem; color: #f0f0f0; font-size: 2.5rem; } </style> <script> function onclick(){ //展示转圈 var toast = document.getElementById("toast"); toast.style.display="flex"; } function ok(){ //关闭转圈展示 var toast = document.getElementById("toast"); toast.style.display="none"; } </script> <html> ...... <div class="toast" id="toast"> <span ><img src="${request.contextPath}\css\colorbox\images\loading.gif"></span> <span>正在处理数据,请稍候...</span> </div> </html>
附件：动态转圈的gif图
二：
需要主页面导入弹窗的组件：
<!--parent.layer.open弹窗的组件--> <g:javascript src="layui/layui-2.2.5/layui.all.js"/>
在子页面中写法（本人是在弹窗中再次弹窗，两个弹窗的父页面都指向主页面）页面写法(注意：type=2表示是打卡<iframe>窗口，其它类型窗口请自行百度了解；参考：layer.open（常用）_迷迭绿的博客-CSDN博客_layer.open）
//本窗口是在已弹出窗口基础上点击按钮再次弹窗（还是在父类页面基础上弹窗） parent.layer.open({ id: '666' type: 2, title: '', shadeClose: false, shade: 0.8, area: ['530px', '370px'], content: '${request.contextPath}/xxx' });
更换弹窗标题：
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.title('批量导入', index) //再改变当前层的标题
关闭弹窗窗口：
var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index);
主页面重新加载
parent.location.reload();
