使用jquery实现页面右下角弹窗提醒

项目有需要实现类似QQ右下角弹窗提醒的需求,项目要求的其实复杂点,不单单是弹窗,还涉及到定时弹窗、指定页面弹窗、对指定的用户弹窗,以及点击事件等等,需要写的控制也比较多。这里只是简单记录下html页面通过jquery实现弹窗功能。

html页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>消息提醒</title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script src="notice_pop.js" type="text/javascript"></script>
<style type="text/css">
     #content{

        display: flex; /**/
        justify-content: center; /*水平居中*/
        align-items: Center; /*垂直居中*/
        margin-top:30px;
     }
     #bottom{

        display: flex; /**/
        justify-content: center; /*水平居中*/
        align-items: Center; /*垂直居中*/
        margin-top:80px;
     }
</style>
</head>
<body>
 
</body>
</html>

这里主要是引入了jquery和自己编写的js代码,其中还有css样式,用弹性盒子来调整弹框内容样式等。比较简单。

notice_pop.js:

function pop_init(title,content) {
    //取当前浏览器窗口大小
    var windowWidth=$(document).width();
    var windowHeight=$(document).height();
    //弹窗的大小
    var weight=280;
    var height=200;
    $("body").append(
    "<div id='pop_div'style='display:none;position:absolute;border:1px solid #e0e0e0;z-index:99;width:"+weight+"px;height:"+height+"px;top:"+(windowHeight-height-10)+"px;left:"+(windowWidth-weight-10)+"px'>"+
        "<div style='line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;font-size:14px;padding:0 0 0 10px;'>" +
            "<div style='float:left;'><b>"+title+"</b></div><div style='float:right;cursor:pointer;'><b onclick='pop_close()'>关闭</b></div>" +
            "<div style='clear:both'></div>"+
        "</div>" +
        "<div>" +
            "<div id='content'>"+
                 content+
            "</div>"+
            "<div id='bottom'>"+
                 "<button id='btn1' type='button' onClick='onButtonClick()'>确定</button>" +
            "</div>"+
        "</div>"+
    "</div>"
    );
}

//右上角关闭
function pop_close(){
    $('#pop_div').fadeOut(800);
    /*关闭后的跳转页面逻辑*/
}

//点击确定
function onButtonClick(){
    $('#pop_div').fadeOut(800);
    /*关闭后的跳转页面逻辑*/
}
$(document).ready(function(){
    pop_init("公告信息","提醒来啦~~~");
    $('#pop_div').fadeIn(800);
});

其实效果很简单,就是定义弹窗方法,和一些事件。看下面演示图:
20180828115408_650.gif

具体这个demo可以抽象成一个小工具来用,也可以通过setInterval来定时,通过ajax与后台交互,这个都行。其实还有纯后台的工具类方法,那是使用JDialog包来实现的,这里不作过多描述。

Last modification:November 26th, 2019 at 10:23 am
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment