Example code of frameset frame pop-up layer in JS_javascript skills

When I was working on a project some time ago, there was a function called message reminder. I believe many great people have done it. Let me share the problems and solutions I encountered below.

First of all, our project uses the frameset framework and main code.

<frameset name="myFrame" cols="85,*" frameborder="no" border="0" framespacing="0">
<frame src="${base}/left.jsp" name="leftFrame" frameborder="no" scrolling="auto" noresize="noresize" 
id="leftFrame" /> 
<frame src="${base}/welcome.jsp" name="mainFrame" frameborder="no" scrolling="auto" noresize="noresize" 
id="mainFrame" />
</frameset> 

This divides the left and right parts into two parts.

The requirement is when clicking the message icon no matter which page you are on. A message prompt can pop up in the lower right corner.

I have never done this before. I checked a lot of information at that time. Then I first found the jquery message plug-in. Later, I found out how to operate the js of the parent frame, and then the problem was solved.

Because my left.jsp is menu navigation. It is unchanging. So I put the message icon in the left.

js function in left.jsp page:

function openMsg(msgType){
//调用父窗体的获取消息js
window.parent.getMessage(msgType);
}

This is the js function in left to open the message. msgType represents the message status.

window.parent function: return to the parent window

Note: If the window itself is a top-level window, the parent attribute returns a reference to itself.

In a frame web page, the parent window is generally the top-level window, but if there is a frame in the frame, the parent window and the top-level window are not necessarily the same.

Then using this method we can directly call main’s getMessage() function.

getMessage() function in main:

function getMessage(msgType){
/*$.messager.lays(width, height);
*该方法主要用来定义弹出窗口的宽度和高度。
*/
$.messager.lays(200, 150);
var msg="无消息"
if(msgType==1){
msg="jqueryMessage新消息提醒";
}else{
msg="jqueryMessage已提醒消息";
}
/*$.messager.show(title,text,time);
*该方法主要定义窗口显示的内容，以及窗口显示多长时间后进行隐藏。
*如果使用默认的标题，则将title设置为0，另外title和text还可以设置为html内容进行显示。如果希望用户点击弹窗的关闭按钮才关闭 
*消息框，可将time设置为0。
*/
$.messager.show("消息提醒",msg);
}
</script> 

Also $.messager.anim(type,speed);

This method mainly defines the way and speed at which the window is presented.

$.messager.anim("fade",1000); //Display in fadeIn animation

$.messager.anim("show",1000); //Display in show animation

So, the above briefly introduces several commonly used methods in jquery’s message plug-in

Of course, if we want to use it, we need to introduce jquery.js and jquery.messager.js files into the page.

With this combination, we have completed the entire set of functions.

This rendering runs normally under IE8 and is compatible with Google. The editor will introduce you to the frameset pop-up layer effect here. I hope it will be helpful to you!