onclick="sAlert('${vo.courseName}');"

<script type="text/javascript" language="javascript">
function getScroll() {
var top, left, width, height;
if (document.documentElement && document.documentElement.scrollTop) {
top = document.documentElement.scrollTop;
left = document.documentElement.scrollLeft;
width = document.documentElement.scrollWidth;
height = document.documentElement.scrollHeight;
}
else if (document.body) {
top = document.body.scrollTop;
left = document.body.scrollLeft;
width = document.body.scrollWidth;
height = document.body.scrollHeight;
}
return { top: top, left: left, width: width, height: height };
}
function scall(){
var v = getScroll();
var bgDiv = document.getElementById("bgDiv");
var msgDiv = document.getElementById("msgDiv");
var msgTitle = document.getElementById("msgTitle");
if(bgDiv != null){

bgDiv.style.top = ((v.top) + 0) + "px";
}
if(msgDiv != null){ //重新设置滚动条的位置
msgDiv.style.left = "50%";
msgDiv.style.top = "50%";
msgDiv.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgDiv.style.marginLeft = "-225px" ;
msgDiv.style.marginTop = (-75+(v.top))+"px";
}
if(msgTitle != null){
msgTitle.style.top = ((v.top) + 50) + "px";
}
}
window.onload = scall ;
window.onscroll = scall ;
</script>

<script type="text/javascript" language="javascript">
function sAlert(str){
var top = document.body.scrollTop;//得到滚动条的高度
var msgw,msgh,bordercolor;
msgw=500;//提示窗口的宽度
msgh=300;//提示窗口的高度
titleheight=25 //提示窗口标题高度
bordercolor="#336699";//提示窗口的边框颜色
titlecolor="#99CCFF";//提示窗口的标题颜色

var sWidth,sHeight;
sWidth=document.body.offsetWidth;
sHeight=screen.height;
var bgObj=document.createElement("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);

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+top+"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);
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>

<script type="text/javascript">

$(function(){
scall();

})

</script>

alert的美化,并且随滚动条滚动的更多相关文章

  1. jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

  2. 当滚动条滚动到页面底部自动加载增加内容的js代码

    这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...

  3. 判断滚动条滚动到document底部

    滚动条没有实际的高度.只是为了呈现效果才在外型上面有长度. 在js当中也没有提供滚动条的高度API. 参考了网上有关资料:判断滚动条到底部的基本逻辑是滚动条滚动的高度加上视口的高度,正好是docume ...

  4. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  5. 让div固定在顶部不随滚动条滚动

    让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  6. 如何通过JQuery将DIV的滚动条滚动到指定的位置

    这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. var container = $('div'), inner = $('#inner'); container.scrol ...

  7. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  8. jQuery粘性跟随滚动条滚动的导航栏源代码下载

    jQuery粘性跟随滚动条滚动的导航栏源代码下载 作者:网页模板 大小:0.005MB 点击次数:3494 发布时间:2014-03-07 12:55 分享到:0 特效介绍 jQuery粘性跟随滚动条 ...

  9. 随滚动条滚动的居中div

    <!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  10. WM_SYSCOMMAND包括很多功能,比如:拖动左边框、拖动标题栏、滚动条滚动、点击最小化、双击标题栏——Delphi 通过事件代替了大部分常用的消息,所以Delphi 简单、易用、高效

    procedure TForm1.WMSysCommand(var Message: TWMSysCommand); var str: string; begin case Message.CmdTy ...

随机推荐

  1. JavaScript ,Css and Jquery In OpenERP 7.0

    From: http://openerpbay.blogspot.jp/2013/02/javascript-css-and-jquery-in-openerp-70.html Hi fellows, ...

  2. Android 常用的性能分析工具详解:GPU呈现模式, TraceView, Systrace, HirearchyViewer(转)

    此篇将重点介绍几种常用的Android性能分析工具: 一.Logcat 日志 选取Tag=ActivityManager,可以粗略地知道界面Displaying的时间消耗.当我们打开一个Activit ...

  3. iOS开发- 隐藏键盘总结

    一.隐藏自身软键盘 当对于有多个UITextField控件都想通过点击"Return"来隐藏自身软键盘的情况.这时的最好办法是使用Did End on Exit事件.在点击软键盘右 ...

  4. 转载:【Linux+windows】PHP5.5安装PHPRedis扩展

    首先,你必须安装了 Redis服务器,然后才能安装php-redis扩展,就像先安装mysql,然后再将php-mysql扩展安装并引入(区别是:php-redis扩展插件php没有自带,php-my ...

  5. Python 开发者的 6 个必备库,你都了解吗?

    无论你是正在使用 Python 进行快速开发,还是在为 Python 桌面应用制作原生 UI ,或者是在优化现有的 Python 代码,以下这些 Python 项目都是应该使用的. Python那些事 ...

  6. websphere设置jvm参数

    http://www.quiee.com.cn/archives/592/ websphere 选择服务器-> 应用程序服务器-> Server1-> 进程定义->Java 虚 ...

  7. storm trident merger

    import java.util.List; import backtype.storm.Config; import backtype.storm.LocalCluster; import back ...

  8. HDU 4280Island Transport(网络流之最大流)

    题目地址:pid=4280">http://acm.hdu.edu.cn/showproblem.php? pid=4280 这个题是一个纯最大流模板题..就是用来卡时间的.. 还好我 ...

  9. 扩展GeoServer数据源

    今天我们来讲讲怎么扩展GeoServer(简称GS)的数据源.大家都知道,GS支持多种数据源,而且都提供了友好的界面供操作.下面我们就来简单介绍一下,如何把自定义的数据源增加到GS中,让我们可以在统一 ...

  10. docker 下 alpine 镜像设置时区的有效办法

    在使用Docker的时候,由于很多基础linux镜像都比较大,alpine这个仅仅几兆的linux基础镜像受到了很多人喜欢,笔者也不例外,可是由于alpine中的一些配置及命令与常见的centos等系 ...