zoukankan      html  css  js  c++  java
  • 纯js的右下角弹窗

    <html>
    <head>
    <title></title>
    <meta charset="UTF-8">
    <script src="jquery-1.9.1.min.js"></script>
    <script>
    function pop_init(title,content) {
    //取当前浏览器窗口大小
    var windowWidth=$(document).width();
    var windowHeight=$(document).height();
    //弹窗的大小
    var weight=320;
    var height=240;
    $("body").append(
    "<div id='pop_div'style='display:none;position:absolute;border:1px solid #e0e0e0;z-index:99;"+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 id='content'>" +
    content+
    "</div>"+
    "</div>"
    );
    }
    function pop_close(){
    $('#pop_div').fadeOut(400);
    }
    $(document).ready(function(){
    pop_init("公告信息","<ul><li>sss</li><li>sss</li></ul>");
    $('#pop_div').fadeIn(400);
    });
    </script>
    </head>
    <body>

    </body>
    </html>
  • 相关阅读:
    JAVA 框架
    npm安装超时,使用淘宝镜像
    使用vite搭建Vue3项目
    前端常用框架
    vue发布自己的组件库-vue3
    vue2升级vue3-基础教程
    Navicat Premium 15破解失败解决方案
    大屏
    vue使用高德地图
    vue生命周期及钩子函数
  • 原文地址:https://www.cnblogs.com/duanqiao123/p/8677394.html
Copyright © 2011-2022 走看看