用JS写的
给你小例子:
<!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" />
<title>弹出小窗口示例</title>
</head><body>
<a href="javascript:void(0);" onclick="show();return false;">点击弹出小窗口 </a>
<script type="text/javascript">
var isshow=0;//0小窗口没有显示,1小窗口已显
$=function (id){return document.getElementById(id);}
function HR_href()
{
var sle=$("select").value;
if(sle==1)
window.location.href="1.html";
else if(sle==2)
window.location.href="2.html";
else if(sle==3)
window.location.href="3.html";
}
function creatediv()
{
var msgw,msgh,bordercolor;
msgw=200;//提示窗口的宽度
msgh=200;//提示窗口的高度
var sWidth,sHeight;
if( top.location == self.location )
doc = document;
var docElement = doc.documentElement;
sWidth=docElement.clientWidth;
sHeight = docElement.clientHeight;
if( docElement.scrollHeight > sHeight )
sHeight = docElement.scrollHeight;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.left="0";
bgObj.style.background="#777";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);
var html="";
html+='<select name="select" id="select" onchange="HR_href();">'
+'<option ></option>'
+'<option value="1">'+'百度'+'</option>'
+'<option value="2">'+'新浪'+ '</option>'
+'<option value="3">'+'google '+ '</option>'
html+='</select>';
var msgObj=document.createElement("div");
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.position = "absolute";
msgObj.style.left = "40%";
msgObj.style.background="#fff";
msgObj.style.marginLeft = "-200px" ;
msgObj.style.top = (document.documentElement.clientHeight/2+document.documentElement.scrollTop-252)+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.zIndex = "10001";
msgObj.innerHTML = "请选择你要跳转页面:"+html+"<br /><a href=\"javascript:void(0);\" onclick='delWinD();return false;'>点我关闭窗口</a>";
document.body.appendChild(msgObj);
}
function delWinD()
{
document.getElementById("bgDiv").style.display="none";
document.getElementById("msgDiv").style.display="none";
isshow=0;
}
function show()
{
isshow=1;
if(!document.getElementById("msgDiv"))//小窗口不存在
creatediv();
else
{
document.getElementById("bgDiv").style.display="";
document.getElementById("msgDiv").style.display="";
document.getElementById("msgDiv").style.top=(document.documentElement.clientHeight/2+document.documentElement.scrollTop-252)+"px";
}
}
</script>
</body>
给你小例子:
<!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" />
<title>弹出小窗口示例</title>
</head><body>
<a href="javascript:void(0);" onclick="show();return false;">点击弹出小窗口 </a>
<script type="text/javascript">
var isshow=0;//0小窗口没有显示,1小窗口已显
$=function (id){return document.getElementById(id);}
function HR_href()
{
var sle=$("select").value;
if(sle==1)
window.location.href="1.html";
else if(sle==2)
window.location.href="2.html";
else if(sle==3)
window.location.href="3.html";
}
function creatediv()
{
var msgw,msgh,bordercolor;
msgw=200;//提示窗口的宽度
msgh=200;//提示窗口的高度
var sWidth,sHeight;
if( top.location == self.location )
doc = document;
var docElement = doc.documentElement;
sWidth=docElement.clientWidth;
sHeight = docElement.clientHeight;
if( docElement.scrollHeight > sHeight )
sHeight = docElement.scrollHeight;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.left="0";
bgObj.style.background="#777";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);
var html="";
html+='<select name="select" id="select" onchange="HR_href();">'
+'<option ></option>'
+'<option value="1">'+'百度'+'</option>'
+'<option value="2">'+'新浪'+ '</option>'
+'<option value="3">'+'google '+ '</option>'
html+='</select>';
var msgObj=document.createElement("div");
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.position = "absolute";
msgObj.style.left = "40%";
msgObj.style.background="#fff";
msgObj.style.marginLeft = "-200px" ;
msgObj.style.top = (document.documentElement.clientHeight/2+document.documentElement.scrollTop-252)+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.zIndex = "10001";
msgObj.innerHTML = "请选择你要跳转页面:"+html+"<br /><a href=\"javascript:void(0);\" onclick='delWinD();return false;'>点我关闭窗口</a>";
document.body.appendChild(msgObj);
}
function delWinD()
{
document.getElementById("bgDiv").style.display="none";
document.getElementById("msgDiv").style.display="none";
isshow=0;
}
function show()
{
isshow=1;
if(!document.getElementById("msgDiv"))//小窗口不存在
creatediv();
else
{
document.getElementById("bgDiv").style.display="";
document.getElementById("msgDiv").style.display="";
document.getElementById("msgDiv").style.top=(document.documentElement.clientHeight/2+document.documentElement.scrollTop-252)+"px";
}
}
</script>
</body>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货