站內消息彈出層簡單實現

時間 2019-12-12

標籤消息彈出簡單實現简体版

原文原文鏈接

因爲項目中用到的是dwz框架，想整合layui的彈出層組件，牽扯太多太麻煩，索性本身動手，實現下站內消息推送右下角彈出層進行提示。代碼可直接複製使用，樣式撿漏，稍微再調一下吧，簡單展現下。javascript

展現效果

完整代碼以下

<!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 code
    setTimeout(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;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。