var msgObj=document.createElement("div")//创建一个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");//创建一个h4对象（提示框标题栏）
title.setAttribute("id","msgTitle");
title.setAttribute("align","left");
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="提示";
document.body.appendChild(msgObj);//在body内添加提示框div对象msgObj
document.getElementById("msgDiv").appendChild(title);//在提示框div中添加标题栏对象title
var button=document.createElement("input");//创建一个input对象（提示框按钮）
button.setAttribute("type","button");
button.setAttribute("value","确定");
button.setAttribute("className","inputsubmit")
button.onclick=editPasswd;
var button1=document.createElement("input");//创建一个input对象（提示框按钮）
button1.setAttribute("type","button");
button1.setAttribute("value","取消");
button1.setAttribute("className","inputsubmit")
button1.marginleft = 100;
button1.onclick=removeObj;
var txt=document.createElement("p");//创建一个p对象（提示框提示信息）
txt.setAttribute("className","war")
txt.setAttribute("id","msgTxt");
txt.innerHTML="是否确定修改?";//来源于函数调用时的参数值
document.getElementById("msgDiv").appendChild(txt);//在提示框div中添加提示信息对象txt
document.getElementById("msgDiv").appendChild(button);//在提示框div中添加按钮对象button
document.getElementById("msgDiv").appendChild(button1);
效果如下:（标题栏没有关闭按钮图标的． 确定，取消两个按钮没有居中）
偶想在标题栏上加一个关闭的图标. 还有偶那两个按钮想居中. 请大伙帮个忙看看要怎么改一下代码.
8 个解决方案
#1
顶
#2
给你个DEMO 自己看看
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="http://www.lzlu.com/Google/js/box/s2/theme.css" rel="stylesheet" type="text/css" id="cssfile" />
<script type="text/javascript">
//公用函数
var fw = {};
fw.dom = {};
fw.ui = {};
fw.array = {};
fw.com = {};
fw.com.ui = {};
fw.isIE = !!document.all;
fw.isFF = !fw.isIE;
fw.getId = function (id) {
return document.getElementById(id);
}
fw.get = function (v) {
return typeof v == "string" ? fw.getId(v) : v;
}
fw.setStyle = function(obj,st){
for (var i in st){
obj.style[i] = st[i];
}
}
fw.create = function(parentObj,tag,args){
var obj = document.createElement(tag);
if (args){
for (var item in args){
if (item=="style") {
fw.setStyle(obj,args[item]);
}else if (item=="range"){
obj.style.position = "absolute";
fw.dom.setRange(obj,args[item]);
}else if (item=="html"){
obj.innerHTML = args.html;
}else if (item=="className"){
obj.className = args[item];
}else{
obj.setAttribute(item,args[item]);
}
}
}
parentObj.appendChild(obj);
return obj;
}
fw.bind = function() {
var args = fw.array.clone(arguments);
var obj = args.shift();
var method = args.shift();
//method.prototype;
// assert method != null;
if (typeof method != "function"){
throw "Invalid method: " + method;
}
return function() {
var iargs = [];
for (var i = 0; i < arguments.length; i++){
iargs.push(arguments[i]);
}
return method.apply(obj, args.concat(iargs));
}
}
fw.array.each = function (arr, callBack) {
for (var i = 0, l = arr.length; i < l; i++) {
callBack(arr[i]);
}
}
fw.array.clone = function (arr_old) {
var arr_new = [];
fw.array.each(arr_old, function (val) {arr_new.push(val);});
return arr_new;
}
fw.dom.getLeft = function (o) {
return parseInt(o.style.left) || 0;
}
fw.dom.getTop = function (o) {
return parseInt(o.style.top) || 0;
}
fw.dom.getXy = function (o) {
return {x:fw.dom.getLeft(o), y:fw.dom.getTop(o)};
}
fw.dom.setLeft = function (o, px) {
o.style.left = px + "px";
}
fw.dom.setTop = function (o, px) {
o.style.top = px + "px";
}
fw.dom.setWidth = function (o, px) {
o.style.width = px + "px";
}
fw.dom.setHeight = function (o, px) {
o.style.height = px + "px";
}
fw.dom.setXy = function (o, x, y) {
fw.dom.setLeft(o, x);
fw.dom.setTop(o, y);
}
fw.dom.setSize = function (o, w, h) {
fw.dom.setWidth(o, w);
fw.dom.setHeight(o, h);
}
fw.dom.setRange = function (o, r) {
fw.dom.setXy(o, r[0], r[1]);
fw.dom.setSize(o, r[2], r[3]);
}
if (fw.isIE){
fw.event = function (){
var e = window.event;
if (!e.target){
e.target = e.srcElement;
}
return e;
}
fw.capture = {
start : function (obj){
obj.setCapture();
},
end : function (obj){
obj.releaseCapture();
}
}
}else{
fw.event = function () {
var e, f = arguments.callee;
while ((f = f.caller)) {
if ((e = f.arguments[0]) && /Event/.test(e.constructor.toString())) {
return e;
}
}
}
fw.capture = {
start : function(obj){
window.captureEvents(Event.MouseMove|Event.MouseUp);
},
end : function(obj){
window.releaseEvents(Event.MouseMove|Event.MouseUp);
}
}
}
//拖动
fw.ui.drag = function (obj){
obj = fw.get(obj);
obj.style.position = "absolute";
var isMoveAble = false;
var xy;
obj.onmousedown = function (){
fw.capture.start(obj);
isMoveAble = true;
var evt = fw.event();
xy = fw.dom.getXy(obj);
xy = {
x : evt.clientX - xy.x,
y : evt.clientY - xy.y
}
}
obj.onmousemove = function (){
if (isMoveAble){
var evt = fw.event();
fw.dom.setXy(obj, evt.clientX-xy.x, evt.clientY-xy.y);
}
}
obj.onmouseup = function (){
fw.capture.end(obj);
isMoveAble = false;
}
}
//窗口类
fw.com.ui.window = function(json){
this.obj = {};
var html = '<div class="box-tl"><div class="box-tr"><div class="box-tc" id="fw.com.ui.window.title"></div></div></div><div class="box-ml"><div class="box-mr"><div class="box-mc" id="fw.com.ui.window.panel"></div></div></div><div class="box-bl"><div class="box-br"><div class="box-bc"></div></div></div><div class="box-tool"><a href="javascript:void(0);" id="fw.com.ui.window.close"></a></div>';
this.obj.box = fw.create(document.body,"div",{className:"box",style:{
position:"absolute", display:json.display?json.display:""
},html:html});
fw.getId("fw.com.ui.window.close").onclick = fw.bind(this,this.hide);
fw.getId("fw.com.ui.window.title").innerHTML = json.title?json.title:"";
with(fw.getId("fw.com.ui.window.panel")){
innerHTML = json.html?json.html:"";
style.height = (json.range[3]-56)+"px";
}
fw.dom.setRange(this.obj.box, json.range);
fw.ui.drag(this.obj.box);
}
//显示窗口
fw.com.ui.window.prototype.show = function(){
this.obj.box.style.display = "";
}
//隐藏窗口
fw.com.ui.window.prototype.hide = function(){
this.obj.box.style.display = "none";
}
</script>
</head>
<body>
<button onclick="oo.show();">显示窗口</button>
<script type="text/javascript">
var oo = new fw.com.ui.window({
range : [100,100,400,150],
title : "我的窗口",
html : "<br/><br/>很好很强大，不黄不暴力!",
display : "none"
});
</script>
</body>
</html>
#3
这个函数好像也实现不了标题栏加按钮功能吧
#4
就没有能帮偶给看看吗？
#5
你写的这个太复杂老，你可以照2楼的看看。
#6
不复杂的， 说白了就是否就想让大伙给看看．怎么加一个关闭按钮的
#7
现在标题栏只有一个＂提示＂的文本， 就是想在标题栏的最右边加一个关闭按钮
#8
直接加一个关闭按钮调用关闭层事件就可以了，剧中问题，你可以拿到屏幕的高宽取一半就可以了啊
#1
顶
#2
给你个DEMO 自己看看
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="http://www.lzlu.com/Google/js/box/s2/theme.css" rel="stylesheet" type="text/css" id="cssfile" />
<script type="text/javascript">
//公用函数
var fw = {};
fw.dom = {};
fw.ui = {};
fw.array = {};
fw.com = {};
fw.com.ui = {};
fw.isIE = !!document.all;
fw.isFF = !fw.isIE;
fw.getId = function (id) {
return document.getElementById(id);
}
fw.get = function (v) {
return typeof v == "string" ? fw.getId(v) : v;
}
fw.setStyle = function(obj,st){
for (var i in st){
obj.style[i] = st[i];
}
}
fw.create = function(parentObj,tag,args){
var obj = document.createElement(tag);
if (args){
for (var item in args){
if (item=="style") {
fw.setStyle(obj,args[item]);
}else if (item=="range"){
obj.style.position = "absolute";
fw.dom.setRange(obj,args[item]);
}else if (item=="html"){
obj.innerHTML = args.html;
}else if (item=="className"){
obj.className = args[item];
}else{
obj.setAttribute(item,args[item]);
}
}
}
parentObj.appendChild(obj);
return obj;
}
fw.bind = function() {
var args = fw.array.clone(arguments);
var obj = args.shift();
var method = args.shift();
//method.prototype;
// assert method != null;
if (typeof method != "function"){
throw "Invalid method: " + method;
}
return function() {
var iargs = [];
for (var i = 0; i < arguments.length; i++){
iargs.push(arguments[i]);
}
return method.apply(obj, args.concat(iargs));
}
}
fw.array.each = function (arr, callBack) {
for (var i = 0, l = arr.length; i < l; i++) {
callBack(arr[i]);
}
}
fw.array.clone = function (arr_old) {
var arr_new = [];
fw.array.each(arr_old, function (val) {arr_new.push(val);});
return arr_new;
}
fw.dom.getLeft = function (o) {
return parseInt(o.style.left) || 0;
}
fw.dom.getTop = function (o) {
return parseInt(o.style.top) || 0;
}
fw.dom.getXy = function (o) {
return {x:fw.dom.getLeft(o), y:fw.dom.getTop(o)};
}
fw.dom.setLeft = function (o, px) {
o.style.left = px + "px";
}
fw.dom.setTop = function (o, px) {
o.style.top = px + "px";
}
fw.dom.setWidth = function (o, px) {
o.style.width = px + "px";
}
fw.dom.setHeight = function (o, px) {
o.style.height = px + "px";
}
fw.dom.setXy = function (o, x, y) {
fw.dom.setLeft(o, x);
fw.dom.setTop(o, y);
}
fw.dom.setSize = function (o, w, h) {
fw.dom.setWidth(o, w);
fw.dom.setHeight(o, h);
}
fw.dom.setRange = function (o, r) {
fw.dom.setXy(o, r[0], r[1]);
fw.dom.setSize(o, r[2], r[3]);
}
if (fw.isIE){
fw.event = function (){
var e = window.event;
if (!e.target){
e.target = e.srcElement;
}
return e;
}
fw.capture = {
start : function (obj){
obj.setCapture();
},
end : function (obj){
obj.releaseCapture();
}
}
}else{
fw.event = function () {
var e, f = arguments.callee;
while ((f = f.caller)) {
if ((e = f.arguments[0]) && /Event/.test(e.constructor.toString())) {
return e;
}
}
}
fw.capture = {
start : function(obj){
window.captureEvents(Event.MouseMove|Event.MouseUp);
},
end : function(obj){
window.releaseEvents(Event.MouseMove|Event.MouseUp);
}
}
}
//拖动
fw.ui.drag = function (obj){
obj = fw.get(obj);
obj.style.position = "absolute";
var isMoveAble = false;
var xy;
obj.onmousedown = function (){
fw.capture.start(obj);
isMoveAble = true;
var evt = fw.event();
xy = fw.dom.getXy(obj);
xy = {
x : evt.clientX - xy.x,
y : evt.clientY - xy.y
}
}
obj.onmousemove = function (){
if (isMoveAble){
var evt = fw.event();
fw.dom.setXy(obj, evt.clientX-xy.x, evt.clientY-xy.y);
}
}
obj.onmouseup = function (){
fw.capture.end(obj);
isMoveAble = false;
}
}
//窗口类
fw.com.ui.window = function(json){
this.obj = {};
var html = '<div class="box-tl"><div class="box-tr"><div class="box-tc" id="fw.com.ui.window.title"></div></div></div><div class="box-ml"><div class="box-mr"><div class="box-mc" id="fw.com.ui.window.panel"></div></div></div><div class="box-bl"><div class="box-br"><div class="box-bc"></div></div></div><div class="box-tool"><a href="javascript:void(0);" id="fw.com.ui.window.close"></a></div>';
this.obj.box = fw.create(document.body,"div",{className:"box",style:{
position:"absolute", display:json.display?json.display:""
},html:html});
fw.getId("fw.com.ui.window.close").onclick = fw.bind(this,this.hide);
fw.getId("fw.com.ui.window.title").innerHTML = json.title?json.title:"";
with(fw.getId("fw.com.ui.window.panel")){
innerHTML = json.html?json.html:"";
style.height = (json.range[3]-56)+"px";
}
fw.dom.setRange(this.obj.box, json.range);
fw.ui.drag(this.obj.box);
}
//显示窗口
fw.com.ui.window.prototype.show = function(){
this.obj.box.style.display = "";
}
//隐藏窗口
fw.com.ui.window.prototype.hide = function(){
this.obj.box.style.display = "none";
}
</script>
</head>
<body>
<button onclick="oo.show();">显示窗口</button>
<script type="text/javascript">
var oo = new fw.com.ui.window({
range : [100,100,400,150],
title : "我的窗口",
html : "<br/><br/>很好很强大，不黄不暴力!",
display : "none"
});
</script>
</body>
</html>
#3
这个函数好像也实现不了标题栏加按钮功能吧
#4
就没有能帮偶给看看吗？
#5
你写的这个太复杂老，你可以照2楼的看看。
#6
不复杂的， 说白了就是否就想让大伙给看看．怎么加一个关闭按钮的
#7
现在标题栏只有一个＂提示＂的文本， 就是想在标题栏的最右边加一个关闭按钮
#8
直接加一个关闭按钮调用关闭层事件就可以了，剧中问题，你可以拿到屏幕的高宽取一半就可以了啊