自己做的模擬模態對話框實現代碼
2024-05-06 14:21:53
供稿：網友
代碼如下:
<!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=utf-8" />
<title>無標題文檔</title>
</head>
<input type="button" value="test" style="height:500px" />
選擇經度:<input type="text" id="txtSelect" />
<iframe name="map" src="baidumap.htm" id="map" style="display:none"></iframe>
<body>
</body>
</html>
<script type="text/javascript">
document.getElementById("txtSelect").onfocus=function(){
var windows = document.getElementById("window");
var title = document.getElementById("title");
var layer = document.getElementById("layer");
if(windows==null&&layer==null&&title==null){
var style = document.createElement("style");
style.type="text/css";
document.body.appendChild(style);
var styleText = "#layer{ width:100%;height:100%;background:#000000;position:absolute;z-index:100;left:0;top:0;filter:alpha(opacity=40); opacity:0.4}";
styleText+="#window{position:absolute; z-index:1000;background:#ffc;}";
styleText+="#title{ background:#CCFFFF;width:100%;height:15%;font-size:2em;font-weight:bold; text-align:left; line-height:1.5em }"
styleText+="#content{ height:85%;width:100%;background:#CCCCCC}";
styleText+="#frame{ width:100%;height:100%;} #map{ width:100%;height:100%}";
try{
if(typeof style.styleSheet.cssText!="undefined"){
style.styleSheet.cssText=styleText;
}
}catch(ex){
style.appendChild(document.createTextNode(styleText));
}
var layer = document.createElement("div");
document.body.appendChild(layer);
layer.id="layer";
var windows = document.createElement("div");
document.body.appendChild(windows);
windows.id="window";
windows.style.height="400px";
windows.style.width = "600px";
var height = parseInt(windows.style.height);
var width = parseInt(windows.style.width);
windows.style.top = parseInt(document.documentElement.clientHeight/2-height/2)+"px";
windows.style.left = parseInt(document.documentElement.clientWidth/2-width/2)+"px";
var title = document.createElement("div");
windows.appendChild(title);
title.id="title";
title.appendChild(document.createTextNode("點此關閉"));
var content = document.createElement("div");
windows.appendChild(content);
content.id="content";
var map = document.getElementById("map");
content.appendChild(map);
map.style.display="block";
if(typeof layer.style.opacity!="undefined"){
layer.style.opacity=0.5;
}
else if(typeof layer.style.filter!="undefined"){
layer.style.filter="alpha(opacity=50)";
}
}
else{
if(typeof layer.style.opacity!="undefined"){
layer.style.opacity=0.5;
}
else if(typeof layer.style.filter!="undefined"){
layer.style.filter="alpha(opacity=50)";
