<html>
<head>
<link href="<%=jmfg%>/css/common.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
</head>
<body class="rightbg" onresize="divcenter();" onscroll="divcenter();">
<input type="button" value="点击这里" onclick="divcenter('js弹窗效果');"/>
</body>
<script type="text/javascript" language="javascript">
function divcenter(sStr)
{
var msgw,msgh,bordercolor;
msgw=400;
msgh=100;
titleheight=25 //提示窗口标题高度
bordercolor="#c51100";//提示窗口的边框颜色
titlecolor="#c51100";//提示窗口的标题颜色
var sWidth,sHeight;
sWidth=screen.width;
sHeight=screen.height;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#cccccc";
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+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);
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=sStr;
document.getElementById("msgDiv").appendChild(txt);
}
</script>
</html>
分享到:
相关推荐
js 创建div层
使用js创建div层 包含关闭坐标等,学要的可以参考一下,可能正常使用
原生JS动态创建div的实例,超简单.不喜欢冗余代码的同学,建议可以看看
代码片段: borainTimeChoice({ start:".start", end:".end", level:"YM", less:true }); borainTimeChoice({ start:".start-two", end:"", level:"H", ...
把一串 html 标签赋给一...其实,不管是什么 html 标签,js 动态创建的方法都差不多,接着就先从动态添加 div 开始。 一、js 动态添加元素div <div id=parent></div> function addElementDiv(obj) { var parent =
在本教程中,我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果。 创建一个弹出DIV窗口可能是现在网站/网页制作中最常碰到的问题之一。传统的JavaScript弹窗已经不适合目前网站...
同遮盖层划入一样,单纯的遮盖层划出的话算的上是非常简单了,但是在这里它却就不这么简单了,而且我前面还选了个比较麻烦的生成div,而不是显示存在的div,这里有那么几点需要特别注意: 1、遮盖层出现后,鼠标哪怕...
// 绑定高度并获得当前隐藏keys(获得当前事件的下一个元素) /** * 显示状态和模块 ...* 动态创建层并添加显示内容 改分页 */ /** * DWR 提交 */ /** * 分页函数 */ /** * 验证 */
5, 多次弹出的话,在js里面创建div,比在html里把div定义好要方便 6, 参数中,url是调用的php页面,n是浮动层的层数,第一次跳出时n=0,如果在第一次跳出的窗口中,再跳一个窗口出来,则n=1 7, wh是定义跳出窗口的宽...
Vue.js之render函数使用详解 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript的完全编程的能力,这就是 render 函数,它比 template 更接近编译器。 在 HTML ...
该文件是基于html+css+javascript集成的轻量型table表格表头冻结滑动,通过js读取html中表格结构然后动态创建div或table来完成层叠拼接工作
然后在里创建一个div层,指定class为“dtree”,此时该层就引用了dtree的样式 <div class="dtree"> <script type="text/javascript"> tree = new dTree('tree'); ...... </div> 注:具体代码可以...
5.5 创建动态iframe 89 5.6 在文档之间共享函数 90 5.7 打开新窗口 92 5.8 为窗口加载不同的内容 96 第6章 表单处理 98 6.1 选择并转移导航菜单 99 6.2 动态地改变菜单 102 6.3 建立必须填写的字段...
创建遮罩层 代码如下: _createCover: function() { var newMask = document.createElement(“div”); newMask.id = this._mark; newMask.style.position = “absolute”; newMask.style.zIndex = “100”...
14.3 JavaScript创建二维数组 14.4 截断小数点位数 14.5 删除数组中指定元素 14.6 数字选中后放大 14.7 统计字符数的方法 14.8 JavaScript遍历数组 14.9 获取字符串型数组下标的数组长度 14.10 用JavaScript实现数组...
简单模态 使用html,css和vanilla JS创建模态的非常基本的方法。... 在我们的JS文件中,我们可以将点击事件监听器添加到叠加层中,从而将模式和叠加层的“显示”更改为“无”。 此功能可以重新用于我们的“关闭”按钮。
其中为了底图层和切割层是程序自动创建的图片,控制层是自己定义的层(程序中是一个div)。 底图层和切割层必须完全重合,程序中把这两个层都绝对定位到了左上角: this._layBase.style.top = this._layBase.style....
14.3 JavaScript创建二维数组 14.4 截断小数点位数 14.5 删除数组中指定元素 14.6 数字选中后放大 14.7 统计字符数的方法 14.8 JavaScript遍历数组 14.9 获取字符串型数组下标的数组长度 14.10 用JavaScript实现数组...
16.2 使用JavaScript创建cookie 16.2.1 cookie对象 16.2.2 设置cookie属性 16.2.3 创建cookie 16.2.4 从服务器获取cookie信息 16.2.5 删除cookie 16.2.6 使用浏览器删除cookie ...