zoukankan
html css js c++ java
半透明的div对话框
源码:
<!
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
>
<
title
></
title
>
<
script
type
="text/javascript"
>
function
MessageBox()
{}
MessageBox.alert
=
MessageBox$alert;
MessageBox.confirm
=
MessageBox$confirm;
MessageBox.create
=
MessageBox$create;
MessageBox.setSize
=
MessageBox$setSize;
MessageBox.close
=
MessageBox$close;
MessageBox.divConfig
=
{'id':'div1','bgColor':'green','zIndex':
1000
}
;
MessageBox.tableConfig
=
{
'id':'table1',
'bgColor':'white',
'width':'250px',
'height':'100px',
'borderColor':'lightblue',
'titlebgColor':'aliceblue'
}
;
function
MessageBox$alert( message ,callBack )
{
MessageBox.create( message );
var
btn
=
document.createElement('input');
btn.type
=
'button';
btn.value
=
'确定';
if
( callBack
!=
null
)
{
btn.attachEvent('onclick',
function
()
{MessageBox.close();callBack();}
);
}
else
{
btn.attachEvent('onclick',
function
()
{MessageBox.close();}
);
}
var
table
=
document.getElementById(MessageBox.tableConfig['id']);
table.rows[
2
].cells[
0
].innerHTML
=
'';
table.rows[
2
].cells[
0
].appendChild(btn);
}
function
MessageBox$confirm( message,callBack )
{
MessageBox.create( message );
var
btnOK
=
document.createElement('input');
btnOK.type
=
'button';
btnOK.value
=
'确定';
btnOK.style.marginRight
=
'10px';
if
( callBack
!=
null
)
{
btnOK.attachEvent('onclick',
function
()
{MessageBox.close();callBack(
true
);}
);
}
else
{
btnOK.attachEvent('onclick',
function
()
{MessageBox.close();}
);
}
var
btnCANCEL
=
document.createElement('input');
btnCANCEL.type
=
'button';
btnCANCEL.value
=
'取消';
if
( callBack
!=
null
)
{
btnCANCEL.attachEvent('onclick',
function
()
{MessageBox.close();callBack(
false
);}
);
}
else
{
btnCANCEL.attachEvent('onclick',
function
()
{MessageBox.close();}
);
}
var
table
=
document.getElementById(MessageBox.tableConfig['id']);
table.rows[
2
].cells[
0
].innerHTML
=
'';
table.rows[
2
].cells[
0
].appendChild(btnOK);
table.rows[
2
].cells[
0
].appendChild(btnCANCEL);
}
function
MessageBox$create( message )
{
var
divId
=
MessageBox.divConfig['id'];
var
tableId
=
MessageBox.tableConfig['id'];
var
div
=
document.getElementById( divId );
var
table
=
document.getElementById(tableId);
var
divConfig
=
MessageBox.divConfig;
var
tableConfig
=
MessageBox.tableConfig;
if
( div
==
null
)
{
div
=
document.createElement('
<
div style
=
"
filter:alpha(opacity=40);position:absolute;top:0px;left:0px;
"
></
div
>
');
div.id
=
divId;
div.style.backgroundColor
=
divConfig['bgColor'];
div.style.zIndex
=
divConfig['zIndex'];
document.body.appendChild( div );
var
frame
=
document.createElement('
<
iframe style
=
"
filter:alpha(opacity=0);position:absolute;left:0px; top:0px; border-style:none;100%;height:100%;
"
></
iframe
>
');
frame.style.zIndex
=
divConfig['zIndex']
-
1
;
div.appendChild( frame );
var
contentH
=
parseFloat( tableConfig['height'] )
-
50
;
var
strHTML
=
'
<
table id
=
"
'+tableId+'
"
style
=
"
position: absolute; filter : progid:DXImageTransform.Microsoft.DropShadow(color=#666666,offX=3,offY=3,positives=true);font-size:12px; border: '+ tableConfig['borderColor'] +' 1px solid;
"
cellpadding
=
"
2
"
cellspacing
=
"
0
"
>
'
+
'
<
tr
>
'
+
'
<
td style
=
"
height:20px; background-color: '+tableConfig['titlebgColor']+';
"
>
提示信息'
+
'
</
td
>
'
+
'
</
tr
>
'
+
'
<
tr
>
'
+
'
<
td style
=
"
height:'+contentH+'px;text-align:center;word-break:break-all;
"
>
'
+
'
</
td
>
'
+
'
</
tr
>
'
+
'
<
tr
>
'
+
'
<
td style
=
"
height:30px;text-align:center;
"
>
'
+
'
</
tr
>
'
+
'
</
table
>
';
document.body.insertAdjacentHTML('afterBegin',strHTML);
table
=
document.getElementById( tableId );
table.style.backgroundColor
=
tableConfig['bgColor'];
table.style.width
=
tableConfig['width'];
table.style.height
=
tableConfig['height'];
table.style.zIndex
=
divConfig['zIndex']
+
1
;
}
div.style.display
=
'';
table.style.display
=
'';
table.rows[
1
].cells[
0
].innerHTML
=
message;
MessageBox.setSize(div,table);
window.attachEvent(
"
onresize
"
,
function
()
{ MessageBox.setSize(div,table) }
);
window.attachEvent(
"
onscroll
"
,
function
()
{ MessageBox.setSize(div,table) }
);
}
function
MessageBox$setSize(div,table)
{
var
sw
=
parseFloat(document.documentElement.scrollWidth);
var
cw
=
parseFloat(document.documentElement.clientWidth);
var
sh
=
parseFloat(document.documentElement.scrollHeight);
var
ch
=
parseFloat(document.documentElement.clientHeight);
div.style.width
=
sw
>=
cw
?
sw:cw;
div.style.height
=
sh
>=
ch
?
sh:ch;
table.style.left
=
parseFloat(document.documentElement.scrollLeft)
+
cw
/
2
-
parseFloat(table.clientWidth)
/
2
;
table.style.top
=
parseFloat(document.documentElement.scrollTop)
+
ch
/
2
-
parseFloat(table.clientHeight)
/
2
;
}
function
MessageBox$close()
{
document.getElementById(MessageBox.tableConfig['id']).style.display
=
'none';
document.getElementById(MessageBox.divConfig['id']).style.display
=
'none';
}
//
==============================================================================================================
function
t()
{
MessageBox.confirm('are you exit
?
',h);
}
function
h( r )
{
alert('你选的结果是:'
+
r );
}
</
script
>
</
head
>
<
body
>
<
form
id
="id"
action
=""
>
<
button
id
="btn"
onclick
="MessageBox.alert('hello world!',function(){alert('你点我了')});"
>
Click Me
</
button
>
<
input
id
="Button1"
type
="button"
value
="Click Me"
onclick
="t()"
/>
<
select
id
="Select1"
>
<
option
selected
="selected"
></
option
>
</
select
>
asdfasd
</
form
>
</
body
>
</
html
>
查看全文
相关阅读:
nodeJS中的包
NPM
代码检查工具jshint和csslint
javascript中Date对象的应用
Collection包结构,与Collections的区别
TreeMap、HashMap、LindedHashMap的区别
HashMap和ConcurrentHashMap的区别,HashMap的底层源码
HashMap和HashTable的区别
Map、Set、List、Queue、Stack的特点与用法
String、StringBuffer与StringBuilder的区别
原文地址:https://www.cnblogs.com/shcity/p/1004899.html
最新文章
spark 操作Hive时遇到的问题
IDEA 中Spark SQL通过JDBC连接mysql数据库
Spark中统计程序运行时间
Hive VS Hbase
Spark SQL 操作Hive 数据
Spark SQL读parquet文件及保存
Spark SQL中 RDD 转换到 DataFrame (方法二)
(matlab)自定义图像(matlab)
查看gcc编译器版本
联网调试DE1
热门文章
波形图
DE1-LINUX运行
图像处理随笔知识
图像的颜色
数字图像基本要素
numpy (1.16.4) has the default value of allow_pickle as False.
import matplotlib.pyplot as plt出错
AMD及requireJS
使用javascript生成当前博文地址的二维码图片
CMD和seaJS
Copyright © 2011-2022 走看看