Thickbox的一个问题，当弹出层的内容在当前页面时，无法实现提交！？

Question

1：我在当前页面创建了一个div，其包含了用户名，密码框及提交按钮，html代码如下：<div id="abc" style="width:350px;height:200px;border:solid 1px red; display:none;">
    <table style="width:100%;" class="form">
        <tr>
            <td style="text-align:right;width:20%;">&nbsp;</td>
            <td style="text-align:left;width:80%;">&nbsp;</td>
        </tr>
        <tr>
            <td style="text-align:right;width:20%;">用户名：</td>
            <td style="text-align:left;width:80%;"><input type="text" style="width:120px;" /></td>
        </tr>
        <tr>
            <td style="text-align:right;width:20%;">&nbsp;</td>
            <td style="text-align:left;width:80%;">&nbsp;</td>
        </tr>
        <tr>
            <td style="text-align:right;width:20%;">密　码：</td>
            <td style="text-align:left;width:80%;"><input type="text" style="width:120px;" /></td>
        </tr>
        <tr>
            <td style="text-align:right;width:20%;">&nbsp;</td>
            <td style="text-align:left;width:80%;">&nbsp;</td>
        </tr>
        <tr>
            <td style="text-align:right;width:20%;">&nbsp;</td>
            <td style="text-align:left;width:80%;">
                <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="登录（服务器按钮）" />
            </td>
        </tr>
    </table>       
</div><span>显示当前窗体的指定D[code=JScript]iv（注：该Div已被隐藏，其实是存在的，点击“显示窗口”可将其显示出来！）</span><br />
<input type="button" value=" 显示窗口 " onclick="showMe();" />
[/code]
<script type="text/javascript">
    function showMe()
    {
        tb_show("登录", "#TB_inline?height=200&width=350&inlineId=abc", window);
    }
</script>
2：用Thickbox3.1将该div显示出来，但点击提交时却无法实现提交（是服务器按钮），请看图片
图（1）
图（2）
请问，不能提交是不是正常的？
如果才能提交？谢谢！！

Answer 1

jQuery的很多dialog里面都不可以使用服务器端控件
包括jQuery thickbox如果你真的要这样做的话
1、用客户端代码提交
2、干脆就不用thickbox

Answer 2

这是真的吗？但是如果是弹出另一个页面或框架则完全可以正常提交的啊!!如果你真的要这样做的话
1、用客户端代码提交
2、干脆就不用thickbox用方法一能否准确触发该服务器按钮的单击事件？
方法二，你不是说了“jQuery的很多dialog里面都不可以使用服务器端控件”
      还有哪些能达到这一效果（弹出层，且能提交）？

Answer 3

手写一个啊~
我之前用过jQuery ui控件 最后都是选择用ajax来提交了~~~
方法1的话就不会触发单击事件了。而是想form表单提交一会回执到页面去
方法2的话jquery出来之前很多的dialog控件都是可以的。另外jQuery我也就用过几个比较出名的比如thickbox、jQueryUI里的dialog。其他的我没用过，你可以试试

Answer 4

“jquery出来之前很多的dialog控件都是可以的”能说几款吗？谢谢了！

Answer 5

弹出窗口很好实现的啊 给你一个例子，以下是我封装的一个弹出框类：
function __messageBox()
{
    var isIe=(document.all)?true:false;
    var obj = this;
    var backDiv = null;
    //设置select的可见状态
    this.setSelectState = function(state)
    {
        var objl=document.getElementsByTagName('select');
        for(var i=0;i<objl.length;i++)
        {
            objl[i].style.visibility=state;
        }
     };
     
    //弹出提示框
    this.showMessageBox=function (wTitle,content,wWidth,wHeight)
    {
        obj.closeWindow();
        var bWidth=parseInt(document.documentElement.scrollWidth);
        var bHeight=parseInt(document.documentElement.scrollHeight);
        if(isIe){
        obj.setSelectState('hidden');}
        backDiv =document.createElement("div");
        var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;z-index:9999;";
        styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;";
        backDiv.style.cssText=styleStr;
        document.body.appendChild(backDiv);
        obj.showBackground(backDiv,50);
        var mesW=document.createElement("div");
        mesW.className="mesWindow";
        mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button'  class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' >"+content+"</div><div class='mesWindowBottom'></div>";
        var v_top=(obj.getClientHeight()-wHeight)/2;
        v_top+=obj.getScrollTop();
        styleStr="top:"+(v_top)+"px;left:"+(document.body.clientWidth- wWidth)/2+"px;position:absolute;width:"+wWidth+"px;height:"+wHeight+"px;z-index:10000;";
        mesW.style.cssText=styleStr;
        backDiv.appendChild(mesW);
        setTimeout(function(){backDiv.getElementsByTagName('input')[0].onclick=function(){obj.closeWindow();}; },50);
        
    };    //让背景渐渐变暗
     this.showBackground=function(objDiv,endInt)
    {
        if(isIe)
        {
            objDiv.filters.alpha.opacity+=5;
            if(objDiv.filters.alpha.opacity<endInt)
            {
                setTimeout(function(){obj.showBackground(objDiv,endInt)},5);
            }
            }else{
            var al=parseFloat(objDiv.style.opacity);al+=0.05;
            objDiv.style.opacity=al;
            if(al<(endInt/100))
            {setTimeout(function(){obj.showBackground(objDiv,endInt)},5);}
        }
    };
    //显示全屏的一个半透明div
     this.showBackgroundDiv=function()
    {
        obj.closeWindow();
        if(isIe){
        obj.setSelectState('hidden');}
        backDiv =document.createElement("div");
        var bWidth=parseInt(document.documentElement.scrollWidth);
        var bHeight=parseInt(document.documentElement.scrollHeight);
        var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;z-index:9999;";
        styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;";
        backDiv.style.cssText=styleStr;
        document.body.appendChild(backDiv);
        obj.showBackground(backDiv,50);
    };
    //关闭窗口
     this.closeWindow=function()
    {
        if(backDiv!=null)
        {
            backDiv.parentNode.removeChild(backDiv);
            backDiv = null;
        }
        if(isIe){
          obj.setSelectState('');
        }
     };
    /********************
     * 取窗口滚动条滚动高度 
     ******************/
    this.getScrollTop=function ()
    {
       return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ;
    };
    /********************
     * 取窗口可视范围的高度 
     *******************/
    this.getClientHeight=function()
    {
         return (navigator.userAgent.toLowerCase().indexOf("opera") != -1)?document.body.clientHeight:document.documentElement.clientHeight;         
    };
 
 }
         
 /**   
  调用方式    
 var messContent="<div style='padding:20px 10px 20px 10px;text-align:left;'>内容HTML</div>";
var msg = new __messageBox();
 // 弹出提示框
 msg.showMessageBox('标题',messContent,300,150);
 
 // 弹出半透明的div
  msg.showBackgroundDiv()// 别忘记调用样式
.mesWindow{border:#666 1px solid;background:#fff;}
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px; height:22px; line-height:22px;}
.mesWindowContent{margin:4px;font-size:12px; height:1%;}
.mesWindow .close{height:15px;width:40px;border:none;cursor:pointer;text-decoration:underline;background:#fff;text-align:right;}
 */

Answer 6

请问：cj205如果我坚持用Thickbox是不是无解啊，能不能动Thickbox.js文件来实现？？

Answer 7

其实是要做导出Excel，用ajax很麻烦（在前一个项目中，我已经领教过了！）

Answer 8

哦，如果Thickbox确实不行，我也只好放弃了不知道还有没有其它插件啊（支持提交）你刚给的那个不兼容IE6

Answer 9

找了一下弹出层插件，注：支持（非ajax）提交
最后没有找到，放弃了！只好自己写了个简单的（就是将当前页面中指定的层显示出来），有些小问题，也只能这样了感觉这样做（在当前页面处理导出）的重用性很差！！！
每个页面，都要去写几乎同样的代码，郁闷！！！