转载请注明来源：https://www.cnblogs.com/hookjc/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>操作顶层窗口</title>
</head>
<body>
<div>
  <div>           
   <p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>
   <p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p>
   <input type="button" value="点击这里" onClick="sAlert('测试效果');" />
  </div>
</div>
<script language="javascript">
function sAlert(str)
{
 var msgw,msgh,bordercolor;
    msgw=400;//提示窗口的宽度
    msgh=100;//提示窗口的高度
    titleheight=25 //提示窗口标题高度
    bordercolor="#336699";//提示窗口的边框颜色
    titlecolor="#99CCFF";//提示窗口的标题颜色

var sWidth,sHeight;
    sWidth=document.body.offsetWidth;//获取窗口宽度
    sHeight=screen.height;//获取屏幕高度
    
 var bgObj=document.createElement("div");//关键在这里，原理：在body中创建一个div，并将其宽度与高度设置为覆盖整个窗体，如此一来就无法对其它窗口时行操作
 bgObj.setAttribute('id','bgDiv');
    bgObj.style.position="absolute";
 bgObj.style.top="0";
    bgObj.style.background="#777";
    bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
    bgObj.style.opacity="0.6";
    bgObj.style.left="0";
    bgObj.style.width=sWidth + "px";
    bgObj.style.height=sHeight + "px";
    bgObj.style.zIndex = "10000";
    document.body.appendChild(bgObj);//设置完此div后将其显示出来
  
 var msgObj=document.createElement('div');//创建一个消息窗口
 msgObj.setAttribute("id","msgDiv");
    msgObj.setAttribute("align","center");
    msgObj.style.background="white";
    msgObj.style.border="1px solid " + bordercolor;
 msgObj.style.position = "absolute";
 msgObj.style.left = "50%";
 msgObj.style.top = "50%";
 msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
 msgObj.style.marginLeft = "-225px" ;
 msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
 msgObj.style.width = msgw+"px";
 msgObj.style.height = msgh+"px";
 msgObj.style.textAlign = "center";
 msgObj.style.lineHeight ="25px";
 msgObj.style.zIndex = "10001";
 
 var title=document.createElement("h4"); //创建一个标题，以备放置在消息层

title.setAttribute("id","msgTitle");
    title.setAttribute("align","right");
    title.style.margin="0";
    title.style.padding="3px";
    title.style.background=bordercolor;
    title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
    title.style.opacity="0.75";
    title.style.border="1px solid " + bordercolor;
    title.style.height="18px";
    title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
    title.style.color="white";
    title.style.cursor="pointer";
 title.innerHTML="关闭";
 title.onclick=function()
 {
  document.body.removeChild(bgObj);//移除覆盖整个窗口的div层
  document.getElementById("msgDiv").removeChild(title);//移除标题
  document.body.removeChild(msgObj);//移除消息层
 } 
 document.body.appendChild(msgObj);
 document.getElementById("msgDiv").appendChild(title);
    var txt=document.createElement("p");
    txt.style.margin="1em 0"
    txt.setAttribute("id","msgTxt");
    txt.innerHTML=str;
    document.getElementById("msgDiv").appendChild(txt);
}
</script>
</body>
</html>

来源：python脚本自动迁移

div置顶的更多相关文章

  1. jquery——制作置顶菜单

    置顶菜单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. 自定义置顶TOP按钮

    简述一下,分为三个步骤: 1. 添加Html代码 2. 调整Css样式 3. 添加Jquery代码 具体代码如下: <style type="text/css"> #G ...

  3. js之滚动置顶效果

    0.js获取高度 ? 1 2 3 4 5 6 document.all   // 只有ie认识   document.body.clientHeight              // 文档的高,屏幕 ...

  4. JavaScript学习笔记-元素在滚动条滑动一定高度后自动置顶

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. [知了堂学习笔记]_css3特效第二篇--行走的线条&&置顶导航栏

    一.行走的线条. 效果图(加载可能会慢一点儿,请稍等...): html代码: <div class="movingLines"> <img src=" ...

  6. vue 通过自定义指令实现 置顶操作；

    项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令  ...

  7. jQuery操作table数据上移、下移和置顶

    jQuery 操作table中的tr换行的步骤如下: 1.获取当前tr var $tr = $(this).parents("tr"); 2.移动tr //上移 $tr.prev( ...

  8. 置顶菜单demo

    一朋友需要置顶菜单的功能,给了个网站,让弄下来.看了下,就把样式及效果拔了下来.去掉了复杂的东西,只保留了其基本实现.有需要的朋友可以拿去用用. <style> #navigation{ ...

  9. css3特效第二篇--行走的线条&&置顶导航栏

    一.行走的线条. 效果图(加载可能会慢一点儿,请稍等...): html代码: <div class="movingLines"> <img src=" ...

随机推荐

  1. Jmeter环境变量配置你不得不知道的事情

    在安装Jmeter的过程中大家肯定需要配置环境,但是为什么要配置JDK的环境变量呢?大家有没有好奇过,有没有仔细去像一下呢,其实在安装Jmeter前,大家应该都知道Jmeter是我们JAVA开发的,J ...

  2. Capstone通用 USB Type-C音视频拓展坞转换芯片

    专业解决视频接口技术Capstone科技在2021年新推出四款低功耗单芯片USB Type-C音视频格式转换器方案──CS5266.CS5267.CS5268与CS5269.将为各种显示屏.外部显示设 ...

  3. SROP

    先放个例题吧,原理后面有时间再更:BUUCTF ciscn_2019_s_3 保护只开了nx 1 signed __int64 vuln() 2 { 3 signed __int64 v0; // r ...

  4. 中华古诗词知识图谱之实体关系构建&导入neo4j数据库

    实体分析 诗名实体 属性 包含:作诗时间,诗名,内容,翻译,背景. 关系 实体1 关系 实体2 诗名 形式 诗词形式 诗名 作者 诗人 诗名 分类 类别 诗名 词牌名 词牌名 诗名 曲牌名 曲牌名 诗 ...

  5. ActiveMQ基础教程（四）：.net core集成使用ActiveMQ消息队列

    接上一篇:ActiveMQ基础教程(三):C#连接使用ActiveMQ消息队列 这里继续说下.net core集成使用ActiveMQ.因为代码比较多,所以放到gitee上:https://gitee ...

  6. Swoole 中使用 UDP 异步服务器、UDP 同步客户端、UDP 协程客户端

    UDP 异步风格服务器 # udp_server.php // 创建 UDP 服务器对象,监听0.0.0.0:9502端口,类型为SWOOLE_SOCK_UDP $serv = new Swoole\ ...

  7. 初识python： 继承

    继承:可以使用现有类的所有功能,并在无需重新编写原来的类的情况下对这些功能进行扩展. 通过继承创建的新类称为"子类"或"派生类". 被继承的类称为"基 ...

  8. Nginx_全局命令设置

    刚安装好的Nginx, 命令需要去sbin目录执行,比较麻烦,设置下全局命令,就无需进入nginx的sbin目录执行nginx命令了 1.创建文件 vim /etc/init.d/nginx 把下面代 ...

  9. centos7 配置rm命令失效。

    之前写过一篇alias别名的方法,但这个方法配置rm命令在重启后就无效了.而且重启后得输入source alias_test.sh.才可以 centos7 alias别名永久生效 原因是:root用户 ...

  10. Windwos上Mysql突然出现系统错误3，找不到系统路口

    注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6540869188678844935/ 问题出现: 调试系统时,突然发现数据库连接不上了,打开界面工具也发现连接不上 ...