frameset框架弹出层

前段时间做项目,有个功能是消息提醒。 我相信很多大牛都做过。下面来分享我遇到的问题和解决方案。

首先我们的项目是用frameset框架,main代码。

<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>

这样分了左右两个部分。

要求是无论在哪个页面当点击消息图标的时候。能再右下角弹出消息提示。

这个我还真没做过。当时查阅了很多的资料。然后先是找到了jquery的message插件。后来又找到了如何操作父框架的js,然后这个问题就解决了。

因为我left.jsp是菜单导航。它是不变的。所以我就把消息图标放在了left中。

left.jsp页面中的js函数:

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

这是在left中的打开消息的js函数。msgType表示的是消息状态.

window.parent 功能:返回父窗口

注:如果窗口本身是顶层窗口,parent属性返回的是对自身的引用。

在框架网页中,一般父窗口就是顶层窗口,但如果框架中还有框架,父窗口和顶层窗口就不一定相同了。

那么用这个方法我们就能直接调用main的getMessage()函数了。

main中的getMessage()函数:

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>

还有$.messager.anim(type,speed);

该方法主要定义窗口以什么样的方式和速度呈现。

$.messager.anim("fade",1000); //以fadeIn的动画方式显示

$.messager.anim("show",1000); //以show的动画方式显示

那么,上面简单的介绍了下jquery的message插件中常用的几个方法

当然,要想使用我们就要在页面引入jquery.js和jquery.messager.js文件。

通过这么一组合,我们就完成了整个这套功能。

IE8 下正常运行,谷歌兼容。

附上整个源码:http://files.cnblogs.com/zhangnanblog/jqueryMessage%E7%A4%BA%E4%BE%8B.rar

时间: 2024-08-07 17:01:18

frameset框架弹出层的相关文章

如何让EasyUI弹出层跳出框架

这个的解决方法其实挺简单的. 只要在最外面的框架页面加个div,然后用parent.div的id就可以的.但是必须得弹出框得是一个页面. <div id="div_info"></div> //外层弹出框1 function openFirstWin(url, title, width, height) { var strWidth; var strHeight; if (width == null) strWidth = 800; else strWidth

layer弹出层框架alert与msg详解

layer--->web弹层组件 代码: 1 layer.alert('见到你真的很高兴', {icon: 6}); 这是一个最简单的弹出层,可根据icon配置左边的图标 通常情况下,除了弹窗之外我们一般都会有对按钮做回调处理的一些操作 如图: 1 layer.alert('墨绿风格,点击确认看深蓝', { 2 skin: 'layui-layer-molv' //样式类名 自定义样式 3 ,closeBtn: 1 // 是否显示关闭按钮 4 ,anim: 1 //动画类型 5 ,btn: ['

分享一个JQuery弹出层插件

JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:(2010-08-12):修正IE6下不能遮住下拉菜单的BUG,增加拖动时半透明效果.句容市鄂茂钢铁 应用演示 弹出文本信息提示:   我是下拉菜单 tipsWindown("提示","text:提示信息内容","250","150"

使用Layer插件遇到的坑——Layer弹出层闪退

一.前言 巨坑,基础没学好,导致找了一个下午的问题,终于被我发现了.说多都是泪,记录下来,以后有人遇到这个错误可以参考下 做项目期间做了几个页面,需要用到弹出层,为了方便使用到了Layer的插件,然后写点击事件在form表单中(第一个坑),接着,又使用button按钮(悲剧的开始),同样放在form表单下.想要的效果就是当我点击按钮的时候,就弹出层.(悲剧) 好了,巨坑开始,一开始页面打好之后,就放到SSM框架中,出现的问题一开始就是404地址找不到,使用绝对定位不行,浏览器报的错误一直是错误的

一个基于jQuery的弹出层插件XYTips

效果预览:http://www.juheweb.com/js/tc/80.html 标签: jQuery [1].[代码] [JavaScript]代码 跳至 [1] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

javascript对话框(弹出层)组件

http://www.blueidea.com/download/product/2010/7513.asp#comment 1. 从头到尾对一遍<<Javascript高级程序设计>>,不懂的地方可以暂时掠过,给自己对javascript有一个大体的印象2. 认认真真的读完这本书:<<编写可维护的javascript>>,从编码规范,技巧,模式,等各个方面深入体会javascript3. 重新读一遍<<Javascript高级程序设计>&

自定义弹出层!

当不能运用框架的弹出层时,自定义简单的弹出层! <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <head> <title>弹出层</title> <script src="jquery-1.6.2.min.js" type="text/javascript

权限管理系统之LayUI实现页面增删改查和弹出层交互

由于对LayUI框架不太熟悉,昨天抽空看了下LayUI的文档,今天在网上找了使用LayUI进行增删改查相关内容,自己照葫芦画了个瓢,画瓢部分不是很难,主要是下午遇到了一个弹出层的问题耗时比较久. 同一项目,设计风格都差不多,对于涉及单个数据表的页面,基本都是增删改查,布局都是差不多,实际项目中都是复制.粘贴过来改下数据基本就能完成80%,后续就是修修补补或者是要实现一些特殊需求,记得刚参加工作时,老大直接给了一个已经做好的模板页面让我比对着手动敲一遍,当时觉得重复操作没啥用,现在再看觉得作用很大

使用movable-view制作可拖拽的微信小程序弹出层效果。

仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照了一下. 首先善用度娘反编译弄到了源码,但是打不开.然后自己研究源码发现他们用的是movable-view实现的. 于是仿照着搭出了基础框架. 新建了个组件 wxml <!--components/playpanel/playpanel.wxml--> <movable-area style