- [code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22%3E ;
- <html xmlns="http://www.w3.org/1999/xhtml"> http://www.w3.org/1999/xhtml%22%3E ;
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title > 弹出窗口(可拖动, 背景灰色透明)</title>
- <script type="text/javascript">
- <!--
- /FileName:AlertMsg.js
title: 提示标题
content: 提示的内容 /
- document.write("<style type="text/CSS">*{padding:0; margin:0}.close{float:right;cursor:default}</style>")
- function $(id){ return document.getElementById(id)}
- function AlertMsg(title,content){
- var msgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg,con;
- con ="<form><table style='margin:10px 15px 15px 15px; border:0;line-height:50px;'><tr><td > 用户名:<input type='text'placeholder='请输入内容'name='typename'size='20'style='margin-left:20px;margin-right:20px;font-size:14px;width:150px;height:34px;border-radius:4px;border:1px solid #CCC;'/></td><td > 姓名:<input type='text'placeholder='请输入内容'name='typename'size='20'style='margin-left:51px;margin-right:20px;font-size:14px;width:150px;height:34px;border-radius:4px;border:1px solid #CCC;'/></td><td > 性别:</td></tr><tr><td > 生日:<input type='text'placeholder='请输入内容'name='typename'size='20'style='margin-left:35px;font-size:14px;width:150px;height:34px;border-radius:4px;border:1px solid #CCC;'/></td><td > 联系电话:<input type='text'placeholder='请输入内容'name='typename'size='20'style='margin-left:20px;font-size:14px;width:150px;height:34px;border-radius:4px;border:1px solid #CCC;'/></td><td > 管理员:</td></tr><tr><td > 身份证:<input type='text'placeholder='请输入内容'name='typename'size='20'style='margin-left:20px;font-size:14px;width:150px;height:34px;border-radius:4px;border:1px solid #CCC;'/></td><td > 移动电话:<input type='text'placeholder='请输入内容'name='typename'size='20'style='margin-left:20px;font-size:14px;width:150px;height:34px;border-radius:4px;border:1px solid #CCC;'/></td><td > 所属小组:<input type='text'placeholder='请输入内容'name='typename'size='20'style='margin-left:20px;font-size:14px;width:150px;height:34px;border-radius:4px;border:1px solid #CCC;'/></td></tr><tr><td colspan='3'style='text-align:center'><button style='line-height:normal;width:100px;height:40px;margin-top:40px;font-size:18px;border-radius:4px;border:0;color:#000;background-color:#d3d3d3;box-shadow:0 0 1px #666;cursor:pointer;'type='submit'onclick='return submitform()'>确定 </button> <button style='line-height:normal;margin-left:50px;width:100px;height:40px;font-size:18px;border-radius:4px;border:0;color:#000;background-color:#d3d3d3;box-shadow:0 0 1px #666;cursor:pointer;'type='reset'> 取消</button></td></tr></table></form>";
- // 弹出窗口设置
- msgw = 820; // 窗口宽度
- msgh = 320; // 窗口高度
- msgbg = "#FFF"; // 内容背景
- msgcolor = "#000"; // 内容颜色
- bordercolor = "#FFF"; // 边框颜色
- titlecolor = "#000"; // 标题颜色
- titlebg = "#FFF"; // 标题背景
- // 遮罩背景设置
- 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";
- document.body.appendChild(maskObj);
- // 创建弹出窗口
- var msgObj = document.createElement("div")
- msgObj.setAttribute("id","msgdiv");
- msgObj.style.position ="absolute";
- msgObj.style.top = (screen.availHeight - msgh) / 4 + "px";
- msgObj.style.left = (screen.availWidth - msgw) / 2 + "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 thObj = document.createElement("div");
- thObj.setAttribute("id","msgth");
- thObj.className = "DragAble";
- thObj.style.cursor = "move";
- thObj.style.padding = "4px 6px";
- thObj.style.fontSize="18px";
- thObj.style.marginTop="10px";
- thObj.style.color = titlecolor;
- thObj.style.background = titlebg;
- var titleStr = "<a class='close'title='关闭'style='cursor:pointer;margin-top:-10px;'onclick='CloseMsg()'>关闭</a>"+"<span>"+ title +"</span>";
- thObj.innerHTML = titleStr;
- // 创建内容
- var bodyObj = document.createElement("div");
- bodyObj.setAttribute("id","msgbody");
- bodyObj.style.padding = "10px";
- bodyObj.style.lineHeight = "1.5em";
- bodyObj.style.fontSize="16px";
- bodyObj.innerHTML = con;
- var txt = document.createTextNode(content)
- bodyObj.appendChild(txt);
- // 生成窗口
- document.body.appendChild(msgObj);
- $("msgdiv").appendChild(thObj);
- $("msgdiv").appendChild(bodyObj);
- }
- function CloseMsg(){
- // 移除对象
- document.body.removeChild($("maskdiv"));
- $("msgdiv").removeChild($("msgth"));
- $("msgdiv").removeChild($("msgbody"));
- document.body.removeChild($("msgdiv"));
- }
- // 拖动窗口
- var ie = document.all;
- var nn6 = document.getElementById&&!document.all;
- var isdrag = false;
- var y,x;
- var oDragObj;
来源: http://www.qdfuns.com/article/16894/bc22d4ceb945258031dacdd7550db905.html