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. HAWQ技术解析(八) —— 大表分区

    一.HAWQ中的分区表        与大多数关系数据库一样,HAWQ也支持分区表.这里所说的分区表是指HAWQ的内部分区表,外部分区表在后面"外部数据"篇讨论. 在数据仓库应用中 ...

  2. vbox下安装centos (全部都是基于64位)

    1.首先提示说CPU内核不匹配,如下图: 于是查阅资料得知:64位CPU支持32位和64位,而要用64位内核,就需要主板支持,于是修改BIOS,在ADVANCE(高级)里,找到VT(也就是virtua ...

  3. vim 如何编辑 GB2312 编码的文件?

    vim 如何编辑 GB2312 编码的文件? 彻底搞清楚字符编码: ASCII, ISO_8859, GB2312,UCS, Unicode, U 结合file和iconv命令转换文件的字符编码类型 ...

  4. JQMobile引入外部CSS,JS文件

    使用CDN <!DOCTYPE html> <html> <head> <title>html5</title> <meta name ...

  5. 软件开发工具——Make

    掌握Makefile的使用方法和工作流程: 掌握make工具变量的相关知识,包括其引用.定义及分类等: 掌握Makefile常见的函数含义: 掌握Makefile与shell命令行的通信方法: 掌握M ...

  6. css实现图片水平垂直居中

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

  7. 【Redis】redis开机自启动、设置守护进程、密码设置、访问权限控制等安全设置(redis默认端口6379)

    一.redis设置开机自启动:centOS: 1.修改redis.conf中daemonize为yes,确保守护进程开启,也就是在后台可以运行. (守护进程:孤儿进程:独立于终端而存在的进程,不会因为 ...

  8. 【小程序】微信小程序之地图功能

    转载请注明出处:http://blog.csdn.net/crazy1235/article/details/55004841 基本使用 地图组件使用起来也很简单. .wxml <map id= ...

  9. 【转帖】基于Zookeeper的服务注册与发现

    http://www.techweb.com.cn/network/hardware/2015-12-25/2246973.shtml 背景 大多数系统都是从一个单一系统开始起步的,随着公司业务的快速 ...

  10. Android EditText 赋值与取值

    //取值 String strSmsPhone=m_txtSmsPhone.getText().toString(); //赋值 m_txtSmsPhone.setText("你好" ...