用JS做一个弹出框。显示内容为选择性别,该怎么处理
日期：2014-05-16 浏览次数：20356 次
用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什么时候隐藏什么时候显示。
就是日历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什么时候隐藏什么时候显示。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
