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

纯js的右下角弹窗的更多相关文章

  1. JS 实现右下角弹窗

    <!DOCTYPE HTML> <head> <title>JS实现右下角弹窗</title> <meta http-equiv="co ...

  2. js右下角弹窗代码(实测好用)

    实测好用的js右下角弹窗代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  3. 纯JS文本在线HTML编辑器KindEditor

    KindEditor(http://www.kindsoft.net)是一款比较专业,主流,好用的在线HTML编辑器. 它除了可以将文本进行编辑.将Word中的内容复制进来外,本身还可以拖动缩放(右下 ...

  4. 纯JS Web在线可拖拽的流程设计器

    F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...

  5. jquery实现登录后右下角弹窗提醒（附带简单样式）

    页面代码如下:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  6. 纯JS实现KeyboardNav(学习笔记)一

    纯JS实现KeyboardNav(学习笔记)一 这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 GitHub项目源码 预览地址 最终效果 KeyboardNav使用指南 ...

  7. 纯JS实现俄罗斯方块，打造属于你的游戏帝国

    纯JS俄罗斯方块,打造属于你的游戏帝国. 本文原始作者博客 http://www.cnblogs.com/toutou 俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏 ...

  8. js实现右下角可关闭最小化div

    本实例使用Javascript实现右下角可关闭最小化div,可以用于展示推荐内容,效果预览网址:http://keleyi.com/keleyi/phtml/xuanfudiv/3.htm效果图片: ...

  9. winform右下角弹窗

    网页是否经常在电脑右下角弹窗显示消息?其实Winform也是可以实现的.下面介绍两种方法. 第一步:设计窗体 第二步:实现代码 第一种方法 引用user32 声明常量 窗体Load事件 窗体FormC ...

随机推荐

  1. React笔记02——React中的组件

    一个网页可以被拆分成若干小部分,每个部分都可以称为组件,即组件是网页中的一部分.组件中还可以有多个组件. 上一节中的App.js就是一个组件(继承了React.Component类的类). 一个组件的 ...

  2. boost datetime

    To create a date, use the class boost::gregorian::date 1. date #include <boost/date_time/gregoria ...

  3. boost circularBuffer

    1. circular buffer has two fundamental properties: (1): The capacity of the circular buffer is const ...

  4. C++ 彩色图像(RGB)三通道直方图计算和绘制，图像逆时针旋转90° 实现代码

    #include "iostream" #include "opencv2/opencv.hpp" #include "vector" us ...

  5. C++ 穷举算法 鸡兔同笼

    #include "stdio.h" int qiongju(int head, int foot, int *chicken, int *rabbit) { int re, i, ...

  6. ldd3 第12章 PCI驱动程序

    PCI接口 PCI寻址 引导阶段 配置寄存器和初始化 MODULE_DEVICE_TABLE 注册PCI驱动程序 佬式PCI探测 激活PCI设备 访问配置空间 访问I/O和内存空间 PCI中断 硬件抽 ...

  7. Delphi读取和写入utf-8编码格式的文件

    读取UTF-8格式的文件内容 function LoadUTF8File(AFileName: string): string; var ffileStream:TFileStream; fAnsiB ...

  8. 快捷键中文版使用说明之Eclipse快捷键大全

    Ctrl+1 快速修复(最经典的快捷键,就不用多说了) Ctrl+D: 删除当前行  Ctrl+Alt+↓ 复制当前行到下一行(复制增加) Ctrl+Alt+↑ 复制当前行到上一行(复制增加) Alt ...

  9. hdu 5564 Clarke and digits

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=5564 ------------------------------------------------ ...

  10. 用 Flask 来写个轻博客 (32) — 使用 Flask-RESTful 来构建 RESTful API 之一

    目录 目录 前文列表 扩展阅读 RESTful API REST 原则 无状态原则 面向资源 RESTful API 的优势 REST 约束 前文列表 用 Flask 来写个轻博客 (1) - 创建项 ...