自定义的popbox控件，与IE9,IE10兼容性问题。重分100，求解答！1

[areslau08]

大家好，最近我用jquery写了字一个popbox，后来发现在IE9,IE10的标准模式下不可用，兼容性模式倒是可以用，先上代码，我自己查了好久，也没找到为何出这种问题。用的jquery是1.42版本

 <div class='popbox' >
      <div class='open'  style="text-align:left;" >
         <asp:TextBox ID="lblZYYBJZDContent" runat="server" CssClass="textboxMultiLine" TextMode="MultiLine" Enabled="false"></asp:TextBox>
          <span style="margin-left:5px;color:red;" runat="server" >点击文本框显示指导模块，再次点击为关闭。提示：只能在列表中选择。</span></div>
    <div class='collapse'>
      <div class='box'  >
        <div class='arrow' id="arrow" ></div>
        <div class='arrow-border'  id="arrow_border" ></div>
          <div style="width:600px;height:200px;">
          <span id="prarsdfsdfs" style="text-align:left;margin-left:2px;padding-left:2px;"><span class="ok"><input type="button" class="add_button" value="确定" id="btnZYYBJZDOK"   causesvalidation="False"/></span>
              <span style="color:red">勾选适合的指导项目后，点击【确定】按钮即可完成操作</span><span class="close"><input type="button" class="add_button" value="关闭" id="btnZYYBJZDClose"  causesvalidation="False"/></span>
              <span class="cleanall"><input type="button" class="add_button" value="清空已选" title="清空文本框中已经选择的内容" id="btnZYYBJZDClean"   causesvalidation="False" /></span>
          </span>
          <asp:GridView ID="GridView_ZYYBJZD" runat="server" AutoGenerateColumns="False"  EnableModelValidation="True" Width="99%"   >
    <Columns>
                                    <asp:TemplateField ShowHeader="False" HeaderText="选择" ItemStyle-HorizontalAlign="Center"
                                HeaderStyle-Width="30px">
                                <ItemTemplate>
                                    <input type="checkbox" id="checkbox1" runat="server"  value='<%# Eval("sCode") %>' />
                                    <input type="hidden" id="hidrrid" runat="server" value='<%#Eval("gKey") %>' />
                                </ItemTemplate>
                                <ItemStyle Wrap="False" />
                            </asp:TemplateField>
                             <asp:TemplateField HeaderText="指导内容"  ItemStyle-Width="445px" >
                        <ItemTemplate>
                           <asp:Label ID="lblContent" runat="server" Text='<%#Eval("sContent") %>' ></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
    </Columns>
</asp:GridView>
              <input id="hidZYYBJZDContent" type="hidden"  runat="server" class="hid"/>
          </div>
      </div>
    </div>
      
  </div>[code=css]    .popbox {
  /*margin:0px auto;
  text-align:center;
  position:relative;*/
}


  .collapse { position:relative;}

  .open {
    /*background:#DDD;*/
    border:solid 1px #FFF;
    border-radius:5px;
    box-shadow: 0px 0px 5px #CCC;
    /*background:-webkit-gradient(linear,left top,left bottom,from(#f4f4f4),to(#e8e8e8));
    background:-moz-linear-gradient(top,#f4f4f4,#e8e8e8);
    background:linear-gradient(top,#f4f4f4,#e8e8e8);*/
    padding:8px;
  }

    .box {
      display:block;
      display:none;
      background:#FFF;
      border:solid 1px #BBBBBB;
      border-radius:5px;
      box-shadow:0px 0px 15px #999;
      position:absolute;
    }

      .box a.close {
       color:red;
       font-size:12px;
       font-family:arial;
       text-decoration:underline;
      }

      .arrow {
      	width: 0;
      	height: 0;
      	border-left: 11px solid transparent;
      	border-right: 11px solid transparent;
      	border-bottom: 11px solid #FFF;
      	position:absolute;
      	left:1px;
      	top:-10px;
      	z-index:1001;
      }

      .arrow-border {
      	width: 0;
      	height: 0;
      	border-left: 11px solid transparent;
      	border-right: 11px solid transparent;
      	border-bottom: 11px solid #BBBBBB;
      	position:absolute;
      	top:-12px;
      	z-index:1000;
      }

[/code]

    (function () {

        $.fn.popbox = function (options) {
            var settings = $.extend({
                selector: this.selector,
                open: '.open',
                box: '.box',
                arrow: '.arrow',
                arrow_border: '.arrow-border',
                close: '.close',
                grid: '.tbl_list',/*gridview*/
                cleanall: '.cleanall',/*清空按钮*/
                ok: '.ok',
                hid: '.hid',/*隐藏域控件*/
                textboxMultiLine:'.textboxMultiLine'/*文本框控件*/
            }, options);

            var methods = {
                open: function (event) {
                    //debugger;
                    event.preventDefault();
                    methods.close();

                    var pop = $(this);
                    var box = $(this).parent().find(settings['box']);
                    box.find(settings['arrow']).css({ 'left': (box.width() / 2 - 10)});
                    box.find(settings['arrow_border']).css({ 'left': (box.width() / 2 - 10) });

                    if (box.css('display') == 'block') {
                        methods.close();
                    } else {
                        //box.css({ 'display': 'block', 'top': 10, 'left': ((pop.parent().width() / 2) - box.width() / 2) });
                        box.css({ 'display': 'block', 'top': 10, 'left': 0 });

                    }
                },

                close: function () {
                    $(settings['box']).fadeOut("slow");

                },
                clean: function () {
                    var jiankangzhidStr = '';
                    var gridx = $(this).parent().parent().find(settings['grid']);
                    var gridname = "#" + gridx.attr('id') + "  input[id*='checkbox1']:checked";
                    $(gridname).each(function () {
                        this.checked = false;
                    });
                    $(this).parent().parent().find(settings['hid']).val(jiankangzhidStr);
                    var opentxt = $(this).parent().parent().parent().parent().parent().find(settings['open']);
                    opentxt.find(settings['textboxMultiLine']).html(jiankangzhidStr)
                    return false;

                },
                ok: function ()
                {
                    var jiankangzhidStr = '';
                    var pop = $(this);
                    var gridx = $(this).parent().parent().find(settings['grid']);

                    var gridname ="#"+gridx.attr('id')+  "  input[id*='checkbox1']:checked";
                    $(gridname).each(function () {
                        var sCode = $(this).val();
                        jiankangzhidStr += $(this).parent().next().text();
                    });
                    $(this).parent().parent().find(settings['hid']).val(jiankangzhidStr);
                    var opentxt = $(this).parent().parent().parent().parent().parent().find(settings['open']);
                    opentxt.find(settings['textboxMultiLine']).html(jiankangzhidStr)
                    methods.close();
                    return false;
                }
            };

            $(document).bind('keyup', function (event) {
                if (event.keyCode == 27) {
                    methods.close();
                }
            });

            $(document).bind('click', function (event) {
                if (!$(event.target).closest(settings['selector']).length) {
                    methods.close();
                }
            });

     

            return this.each(function () {
                $(this).css({ 'width': $(settings['box']).width() }); // Width needs to be set otherwise popbox will not move when window resized.
                $(settings['open'], this).bind('click', methods.open);
                $(settings['ok'], this).bind('click', methods.ok);
                $(settings['cleanall'], this).bind('click', methods.clean);
                $(settings['open'], this).parent().find(settings['close']).bind('click', function (event) {
                    event.preventDefault();
                    methods.close();
                });
            });


        }

    }).call(this);


    $(document).ready(function () {
        $('.popbox').popbox(this);
    });

[KaddyChan]

用jquery1.10试试吧，1.42那时还没出ie9、10吧

[areslau08]

引用 1 楼 KaddyChan 的回复:

用jquery1.10试试吧，1.42那时还没出ie9、10吧

不行的，我这是已经在运行的项目，jquery是不能降级了。 而且，在IE9.IE10标准模式的时候，只要把

         $(settings['open'], this).bind('click', methods.open);
                $(settings['ok'], this).bind('click', methods.ok);
                $(settings['cleanall'], this).bind('click', methods.clean);
                $(settings['open'], this).parent().find(settings['close']).bind('click', function (event) {
                    event.preventDefault();
                    methods.close();
                });

这一段注释掉，页面就可以正常跑得了，否则ASPX页面，根本显示不出来！！！

[areslau08]

对象传的问题，自己已经解决了！！！