js+div悬浮框
来源:互联网 发布:雅兰仕s8软件 编辑:程序博客网 时间:2024/05/16 07:14
<html>
<head>
<title>弹出窗口(可拖动,背景灰色透明)</title>
<link href="http://localhost:12964/Content/bootstrap.css" rel="stylesheet" />
<script src="http://localhost:12964/Scripts/jquery-1.10.2.js"></script>
<script src="http://localhost:12964/Scripts/bootstrap.js"></script>
<script src="http://localhost:12964/Scripts/Channel/popover.ladder.js"></script>
<script type="text/javascript">
<!--
/*FileName:AlertMsg.js
title:提示标题
content:提示的内容*/
function AlertMsg(title, content) {
var ev = window.event;
var mousePos = mouseCoords(ev);
console.log("AlertMsg")
if (document.getElementById("msgdiv") != null) return;
var msgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg,con;
con = "";
//弹出窗口设置
msgw = 300; //窗口宽度
msgh = 150; //窗口高度
msgbg = "#FFFF66"; //内容背景
msgcolor = "#000"; //内容颜色
bordercolor = "#D9DA97"; //边框颜色
titlecolor = "#FFF"; //标题颜色
titlebg = "#369"; //标题背景
//遮罩背景设置
var sWidth,sHeight;
sWidth = screen.availWidth;
sHeight = document.body.scrollHeight;
//创建遮罩背景
var maskObj = document.createElement("div");
maskObj.setAttribute('id','maskdiv');
maskObj.style.position = "absolute";
maskObj.style.top = "0";
maskObj.style.left = "0";
maskObj.style.background = "#777";
maskObj.style.filter = "Alpha(opacity=30);";
maskObj.style.opacity = "0.3";
maskObj.style.width = sWidth + "px";
maskObj.style.height = sHeight + "px";
maskObj.style.zIndex = "10000";
//创建弹出窗口
var msgObj = document.createElement("div")
msgObj.setAttribute("id","msgdiv");
msgObj.style.position ="absolute";
msgObj.style.top = mousePos.y + "px";
msgObj.style.left = mousePos.x + "px";
msgObj.style.width = msgw + "px";
msgObj.style.height = msgh + "px";
msgObj.style.fontSize = "12px";
msgObj.style.background = msgbg;
msgObj.style.border = "1px solid " + bordercolor;
msgObj.style.zIndex = "10001";
//创建内容
var bodyObj = document.createElement("div");
bodyObj.setAttribute("id","msgbody");
bodyObj.style.padding = "10px";
bodyObj.style.lineHeight = "1.5em";
bodyObj.innerHTML = content;
//生成窗口
//document.body.appendChild(maskObj);
document.body.appendChild(msgObj);
document.getElementById("msgdiv").appendChild(bodyObj);
}
function CloseMsg() {
console.log("CloseMsg")
//移除对象
var bodyObj = document.getElementById("msgbody");
var msgObj = document.getElementById("msgdiv");
var maskObj = document.getElementById("maskdiv");
if(null!=bodyObj&&null!=msgObj){
msgObj.removeChild(bodyObj);
}
if(null!=msgObj){
document.body.removeChild(msgObj);
}
if(null!=maskObj){
document.body.removeChild(maskObj);
}
}
function mouseCoords(ev) {
if (ev.pageX || ev.pageY) {
return { x: ev.pageX, y: ev.pageY };
}
return {
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y: ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
</script>
</head>
<body>
<div style="background-color:red" onmousemove="AlertMsg('', '<div><div class=\'popUpTest\'></div>')" onmouseout=" CloseMsg()">点我试试!</div>
</body>
</html>
- js+div悬浮框
- Js 漂浮层,悬浮 div
- 不用JS 控制悬浮DIV
- div悬浮提示框
- div悬浮
- js+css鼠标悬浮框
- JS实现简单悬浮框
- DIV悬浮效果
- DIV各种悬浮
- 悬浮DIV页面制作
- div悬浮居中
- div悬浮固定
- 悬浮框保证在中间js
- js运动技术--右侧悬浮框!
- CSS实现div悬浮框的代码(兼容IE6)
- JS 让div跟着鼠标移动 以及悬浮层的制作
- js保持div悬浮,不随页面向下滚动而被覆盖
- 让swfobject.js 支持透明的flash,即让悬浮的div能够位于flash之上
- HDU OJ 1232畅通工程(并查集)
- VS2013无法调试Unity3D问题
- Android Gradle 插件中文指南
- Apache service monitor下无服务可供启动
- 【Hibernate】(1)初识Hibernate
- js+div悬浮框
- ioctlsocket函数全面解析
- iOS开发UI篇—Quartz2D使用(绘制基本图形)
- 循环展开
- android:layout_weight的真实含义
- ios开发--UISegmentedControl分段
- 将优酷视频嵌入手机移动端
- css 实现垂直居中的5种方法
- Object-C 封装、拆包基本数据类型