<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>pop</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.form{position:relative}
#popContent{
display:none;
position:absolute;
/*
visibility:hidden;
*/
left:180px;
top:0;
width:200px;
border:1px solid #ddd;
background:#f5f5f5;
overflow: hidden; /* 防止内容过多溢出 */
}
</style>
<script type="text/javascript">
var sBaseText = null;
// 显示弹出框
function showPopup(w, h){
var oPopup = document.getElementById("popContent");
oPopup.style.display = "block";
oPopup.style.width = w + "px";
oPopup.style.height = h + "px";
if(sBaseText == null) sBaseText = oPopup.innerHTML;
oPopup.innerHTML = sBaseText + "<div id=\"statusbar\"><input type=\"button\" value=\"OK\" onclick=\"checkedValue()\" id=\"btnOK\"/> <input type=\"button\" onclick=\"hidePopup()\" value=\"close\"/></div>";
var sBar = document.getElementById("statusbar");
// 设置状态条的位置
//sBar.style.marginTop = (parseInt(h)-120) + "px";
}
// 隐藏弹出框
function hidePopup(){
var oPopup = document.getElementById("popContent");
oPopup.style.display = "none";
}
// 传递选中的值到input中
function checkedValue(){
var aryRadioValue = document.getElementsByName("name");
for(var i=0; i<aryRadioValue.length; i++){
if(aryRadioValue[i].checked){
//alert(aryRadioValue[i].value);
var oResultCityName = document.getElementById("resultCity");
oResultCityName.value= aryRadioValue[i].value;
}
}
hidePopup();
}
// 测试函数-------
// 获取input的值
function getValue(){
var oResultCityName = document.getElementById("resultCity");
alert(oResultCityName.value);
}
// 改变input的值。
function change(){
var oResultCityName = document.getElementById("resultCity");
oResultCityName.value= "change city name";
alert("change is ok!");
}
</script>
</head>
<body>
<form class="form">
<input type="test" value="cow" id="resultCity" onclick="showPopup(200,200)"/>士大夫士大夫士大夫
<div id="popContent">
<h3>选择分类</h3>
<ul class="">
<li><input type="radio" name="name" value="bansi" id="username"/><label for="username">安定bansi</label></li>
<li><input type="radio" name="name" value="kevin" id="userborn"/><label for="userborn">kevin</label></li>
<li><input type="radio" name="name" value="luos" id="usercity"/><label for="usercity">luos</label></li>
</ul>
</div><!-- end div#popContent -->
</form>
<input type="button" value="Change" onclick="change()"/>
<input type="button" value="getValue" onclick="getValue()"/>
<input type="button" value="show" onclick="showPopup(200, 300)" />
</body>
</html>
红色部分标出的使用转义符进行html代码的连接非常方便，遇到"就在前面加 \ 。相比使用加号跟引号比起来方便很多，不容易出错。
