当前位置: 代码迷 >> JavaScript >> 用JS做一个弹出框。显示内容为选择性别,该怎么处理
  详细解决方案

用JS做一个弹出框。显示内容为选择性别,该怎么处理

热度:203   发布时间:2012-02-28 13:06:35.0
用JS做一个弹出框。显示内容为选择性别
就是日历JS控件一样,当鼠标在文本框中一点。那么就弹出一个小框框。选择性别:男 或 女
按了男或女之后。将内容回填到鼠标点中的那个文本框中。

大家明白我的意思没有?我对JS有点茫然。请大家帮帮忙。谢谢各位高手!

------解决方案--------------------
用模式窗口的例子:
第一个页面:
<html>
<body>
单击选择性别:
<input type = "text " name = "userSex " readOnly onclick= "loadSmallWindow(this) " code= " ">
</body>
<script language= "javascript ">
function loadSmallWindow(obj)
{
var returnValue = showModalDialog( "second.html ",window, "dialogWidth:150px;dialogHeight:90px;status:no ");
document.all( "userSex ").value = returnValue;
}
</script>
</html>
窗口页面second.html:
<html>
<body>
<select name = "sel_sex ">
<option value = "男 "> 男 </option>
<option value = "女 "> 女 </option>
</select>
<input type= "submit " value = "确定 " onclick= "aa() ">
</body>
<script language= "javascript ">
window.returnValue = " ";
function aa()
{
window.returnValue = document.all( "sel_sex ").value;
window.close();
}
</script>
</html>
------解决方案--------------------
用层做的例子:
<html>
<body>
<div id= "div " style= "width:150px;height=90px;display:none;background-color:#ffffee;boder-collapse:collapse;border-color:#000000;border-style:solid;border-width:1px;position:absolute;z-index:100 "> <select name = "selSex "> <option value = "男 "> 男 </option> <option value = "女 "> 女 </option> </select> <input type= "button " name = "btnOk " value = "确定 "> </div>
单击选择性别:
<input type = "text " name = "userSex2 " readOnly onfocus= "loadSmallWindow2(this) ">
</body>
<script language= "javascript ">
function loadSmallWindow2(obj)
{
var div = document.getElementById( "div ");
div.style.display = " ";
div.style.top = obj.offsetTop + obj.clientHeight + 2;
div.style.left= obj.offsetLeft;
document.all( "btnOk ").onclick = function(){
onSelectSex(obj,div);
};
}

function onSelectSex(obj,divObj)
{
var sel = document.all( "selSex ");
obj.value = sel.value;
divObj.style.display = "none ";
}
</script>
</html>

以上是我写的两个例子
我只是写个很简单的例子,如果用层,建议把层放在iframe上面,然后控制iframe什么时候隐藏什么时候显示。
  相关解决方案