站内消息弹出层简单实现

由于项目中用到的是dwz框架，想整合layui的弹出层组件，牵扯太多太麻烦，索性自己动手，实现下站内消息推送右下角弹出层进行提示。代码可直接复制使用，样式捡漏，稍微再调一下吧，简单展示下。

展示效果

完整代码如下

<!doctype html>
<html><head><meta charset="utf-8"><title>自定义站内系统通知右下弹出框</title><style type="text/css">*{font-size: 12px;font-family: Arial, sans-serif;}#J_lowerRightCornerShowBox{text-align: left;width: 200px;height:auto;padding:5px;position: absolute;bottom: 30px;right: 33px;z-index: 999;}.J_lowerRightCornerPerBox{padding: 5px 8px;width: 200px;height: auto;min-height: 60px;max-height: 260px;border:2px solid #B3D7E4;background:#9BD183;border-radius: 15px;position: relative;bottom: 3px;right: 5px;}.lowerRightCornerPerBoxRow{width: 100%;height: 30px;padding: 0px;}.lowerRightCornerPerBoxTitle{width: 130px;height: 24px;line-height: 24px;float: left;}.J_lowerRightCornerCloseDiv{width: 40px;text-align:right;height: 24px;line-height: 24px;float: right;display: none;}</style></head><body><!-- 右下角公告展示start --><div id="J_lowerRightCornerShowBox"></div><!-- 右下角公告展示end --><script src="//cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script>
$(function(){//右下角公告box移入移出事件$("#J_lowerRightCornerShowBox").on('mouseover', 'div.J_lowerRightCornerPerBox', function(){var oLowerRightCorner = $(this);oLowerRightCorner.find('div.row .J_lowerRightCornerCloseDiv').show();}).on('mouseout', 'div.J_lowerRightCornerPerBox', function(){var oLowerRightCorner = $(this);oLowerRightCorner.find('div.row .J_lowerRightCornerCloseDiv').hide();});//关闭公告box$('#J_lowerRightCornerShowBox').on('click', 'div.J_lowerRightCornerPerBox a.J_lowerRightCornerPerBoxClose', function (e) {e.preventDefault();var oLowerRightCorner = $(this).parents('.J_lowerRightCornerPerBox');//销毁这个公告oLowerRightCorner.remove();});//test codesetTimeout(function () {createNewLowerRightCornerPerBox('系统消息', '自定义消息内容');createNewLowerRightCornerPerBox('礼运大同篇', '大道之行也，天下为公');createNewLowerRightCornerPerBox('公告', '为建设中国特色社会主义国家而奋斗');}, 2000);});//创建一个新的右下角公告
function createNewLowerRightCornerPerBox(rightCornerTitle, rightCornerContent) {var perBoxHtml = '<div class="J_lowerRightCornerPerBox">'+'<div class="row lowerRightCornerPerBoxRow">'+'<div class="lowerRightCornerPerBoxTitle">'+'<p>'+rightCornerTitle+'</p>'+'</div>'+'<div class="J_lowerRightCornerCloseDiv">'+'<a href="javascript:;" class="J_lowerRightCornerPerBoxClose">关闭</a>'+'</div>'+'</div>'+'<div class="driver"></div>'+'<div class="row J_lowerRightCornerContent">'+rightCornerContent+'</div>'+'</div>';$('#J_lowerRightCornerShowBox').append(perBoxHtml);
}
</script></body>
</html>

调用方法如下：


//在任一页面如下调用即可弹出弹出层（当然了，上面的实现代码需要放在layouts主体视图下，才能在整个网站调用如下代码弹出消息层）
createNewLowerRightCornerPerBox('系统消息', '消息主体内容');

网站公告表结构设计

--
-- 网站公告数据表结构设计
--
-- 网站公告表
-- Create: 2018-03-29 13:50:00
--
DROP TABLE IF EXISTS ueb_website_announcement;
CREATE TABLE `ueb_website_announcement` (`id` int(11) unsigned NOT NULL AUTO_INCREMENT,`sender_id` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '发送者 (0系统)',`receiver_id` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '接收者 (0所有部门)',`title` varchar(64) NOT NULL DEFAULT '' COMMENT '标题',`content` varchar(64) NOT NULL DEFAULT '' COMMENT '内容',`message_type` tinyint(1) NOT NULL DEFAULT '0' COMMENT '公告类型',`displayorder` tinyint(3) NOT NULL DEFAULT '0' COMMENT '排序值',`starttime` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '开始时间',`endtime` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '过期时间',`createtime` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '创建时间',`is_delete` tinyint(1) NOT NULL DEFAULT '0' COMMENT '删除状态 0-未删除，1-已删除',PRIMARY KEY (`id`),KEY `timespan` (`starttime`,`endtime`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;--
-- 网站公告用户关联表
--
DROP TABLE IF EXISTS ueb_website_announcement_user_relation;
CREATE TABLE `ueb_website_announcement_user_relation` (`id` int(11) unsigned NOT NULL AUTO_INCREMENT,`announcement_id` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '公告',`user_id` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '接收者',`readtime` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '查收时间',`modifytime` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '修改时间',`createtime` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '创建时间',`is_read` tinyint(1) NOT NULL DEFAULT '0' COMMENT '阅读状态 0-未读，1-已读',`is_delete` tinyint(1) NOT NULL DEFAULT '0' COMMENT '删除状态 0-未删除，1-已删除',PRIMARY KEY (`id`),KEY `user_id` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

转载于:https://www.cnblogs.com/renzhicai/p/8666254.html

站内消息弹出层简单实现相关推荐

[转贴]现在在做一个WEB的站内消息系统，从工具栏位置弹出一徐徐上升的窗口...
现在在做一个WEB的站内消息系统, 想在用户登陆时, 如果有未读短消息则从工具栏位置弹出一徐徐上升的窗口显示提醒信息! <script language="JavaScript&q ...
ios11，弹出层内的input框光标错位键盘弹出时，输入信息，光标一直乱跳
之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textarea输 ...
artDialog对话框在PHP下的简单应用-artDialog弹出层篇
本教程使用的是artDialog 4.1.7版本,由于需要iframe的支持,所以选择这个版本,artDialog 5.0.3不支持iframe. 本教程是基于本站站长在网页设计写代码过程中与PHP页 ...
一个简单的遮罩弹出层效果
为什么80%的码农都做不了架构师?>>> 打酱油的日子就是要多学习下,最近在学写JS类库,虽然有面对对象语言的基础,但是感觉入手前端还是压力很大,就JS来说,干了半年了,水准还 ...
Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js)
Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js) 参考文章: (1)Bootstrap弹出层(modal)垂直居中简单解决方案(无需修改js) (2)https://www. ...
利用JS弹出层实现简单的动态提示“正在加载中，请稍等...
最近项目中大量用到了JQuery中的Ajax异步加载数据,数据量非常大,导致每次加载的时候都感觉到非常非常慢,让客户体验非常不好,就想到用JS做一个简单的提示. JQuery版本:1.7.1: 编写一 ...
分享一个灰常简单好用的jQuery弹出层插件:jquery.artwl.thickbox.js
最终效果: 插件原理所有弹出层的原理都差不多,就是用一个全屏半透明DIV做遮罩层,在这个遮罩层上再显示出一个层放要显示的内容,其他的就是CSS的运用了. 本插件为了使用简单,把JS跟CSS封装在了一 ...
自写jQuery插件，实现简单网页遮罩层/弹出层功能，兼容IE6、IE7
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u010480479/article/details/25159287 本屌丝近期工作要求重写站点全部 ...
利用JS弹出层实现简单的动态提示“正在加载中，请稍等...”
JQuery版本:1.7.1: 编写一个JS类(ck.layer.js): [javascript] view plaincopy /********************************* ...
jquery简单实现点击弹出层效果实例
先看效果图: 完整例子:  <div id="race"><a href="#">点击</ ...

站内消息弹出层简单实现

展示效果

完整代码如下

调用方法如下：

网站公告表结构设计

站内消息弹出层简单实现相关推荐

最新文章

热门文章