frameset顶级窗口弹出对话框层-优快云博客

本文链接：https://blog.youkuaiyun.com/kyleing/article/details/8935996

1、顶级Html加载所需的弹出层所需的JS与样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>XXX管理系统</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    
    <link href="style/skin.css" rel="stylesheet" type="text/css" />
    
    <link href="jqueryAlerts/css/jQueryAlertDialogs.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript" language="javascript" src="js/jquery.js" charset="utf-8"></script>				
    <link href="jqueryAlerts/jquery.alerts.css" rel="stylesheet" type="text/css" />						
    </head>
<frameset rows="64,*" frameborder="NO" border="0" framespacing="0" name="top">
	<frame src="Top.html" noresize="noresize" frameborder="NO" name="topFrame" scrolling="no" marginwidth="0" marginheight="0" target="main" />
  <frameset cols="200,*"  rows="1000,*" id="frame">
	<frame src="Left.html" name="leftFrame" noresize="noresize" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" target="main" />
	<frame src="Right.html" width="1000px;" name="main" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" target="_self" />
  <frame src="UntitledFrame-1"><frame src="UntitledFrame-2"></frameset>
</frameset><noframes></noframes>
<body>
        <noframes>
            浏览器不支持frameset！
        </noframes>
    </body>
</html>

2、在子窗口中使用弹出窗口的JS脚本，如TOP.html中使用的退出按钮

<script language="JavaScript" type="text/javascript" charset="utf-8">
        function logout() {
            doConfirm("你确定要退出管理系统?", "系统提示", function(e) {
                if (e) {
                    var _parent = window.parent;
                    if (_parent) {
                        _parent.location = "Out.aspx";
                    } else {
                        window.location = "Out.aspx";
                    }
                }
            });
        }
    </script>

3、而此时doConfirm所在的Jquery.alerts.js中使用的创建弹出层脚本通过$("BODY")获取Jquery对象是获取不了的，需改为$(document.body)

$("BODY").append(
			  '<div id="popup_container">' +
			    '<h1 id="popup_title"></h1>' +
			    '<div id="popup_content">' +
			      '<div id="popup_message"></div>' +
				'</div>' +
			  '</div>');

修改为：

$(document.body).append(
			  '<div id="popup_container">' +
			    '<h1 id="popup_title"></h1>' +
			    '<div id="popup_content">' +
			      '<div id="popup_message"></div>' +
				'</div>' +
			  '</div>');

4、可惜火狐不支持，只能在IE下玩玩。