用JS做一个弹出框。显示内容为选择性别

处理文本框的onfocus事件,显示一个包含2个链接(或span)的DIV，再处理链接的onclick事件.

解决方案 »

  1.   

    用模式窗口的例子：
    第一个页面：
    <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>
      

  2.   

    对了，上文例子中文本框最好是onfocus事件
    我写成onclick事件了
      

  3.   

    用层做的例子：
    <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什么时候隐藏什么时候显示。
      

  4.   

    我将          div.style.top = obj.offsetTop + obj.clientHeight + 2;
    div.style.left= obj.offsetLeft;写入到我的ASPX中。在CS中这样调用：
     this.textBox.Attributes.Add("onfocus", "loadSmallWindow2(this)");怎么弹出来的框在屏幕的左上角呢？好偈是 obj.offsetTop 没有作用一样，我用具体数字比如500，就有效果。
    请问还有什么方法可以定位？
      

  5.   

    哦，你是在asp.net里加的，按说是没什么区别才对啊
    用JSP或者HTML这样写都对着
    我对ASP.NET不是很熟，会不会是因为ASP.NET的页面元素是在后台文件定位好的，而不是页面上用HTML标记定位的缘故呢？不过这只是猜想，我对ASP.NET只是初学者，好多东西还不明白。