Question

我有一点问题，我想尝试在这个小提琴中发生的事情http://jsfiddle.net/yXRSz/基本上它可以在阅读T＆amp; C时启用按钮。

我遇到的问题是我希望在AjaxControlToolkit模式窗口中发生这种情况。当模式出现并且移动滚动条时，javascript没有运行滚动功能。滚动条是div上的溢出

我希望这是因为当加载JS时隐藏模态，我试图添加onload和oninit方法并将脚本注入页面而没有运气，任何人都知道如何我注入一次然后模态载满了？

以下代码

<asp:Panel ID="pnlAcceptTerms" runat="server">
                        <div id="divTerms" class="modal modal_styled_dark" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-header">
                                <h3 id="H1">Terms & Conditions</h3>
                                <p>
                                    You have chosen to enter score values, in order for us to proceed with the values you have entered you must accept
                                    that we hold no responsibility for the values that you have entered. If you decline this we will only display the factual information.
                                </p>
                            </div>
                            <div class="modal-body" id="divTermsScrollArea" runat="server">
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                                <p>Terms and conditions are entered here</p>
                            </div>
                            <div class="modal-footer">
                                <div class="button-wrapper submit-button-wrapper clearfix">
                                    <div class="button-input-wrapper submit-button-input-wrapper" style="float: left;">
                                        <asp:Button ID="btnDeclineTerms" runat="server" Text="I Decline Terms" CssClass="ka-form-submit"
                                            CausesValidation="false" OnClick="btnDeclineTerms_Click" />
                                    </div>
                                    <div class="button-input-wrapper submit-button-input-wrapper" style="float: right;">
                                        <asp:Button ID="btnAcceptTerms" runat="server" Text="I Accept Terms" CssClass="ka-form-submit"
                                            OnClick="btnAcceptTerms_Click" UseSubmitBehavior="true" Enabled="false" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="divScrollScript" runat="server"></div>
                    </asp:Panel>
                    <ajaxToolkit:ModalPopupExtender ID="mpeTerms" runat="server" TargetControlID="btnHideMe2"
                        PopupControlID="pnlAcceptTerms" DropShadow="true" BackgroundCssClass="modal-backdrop" OnLoad="mpeTerms_Load" OnInit="mpeTerms_Init">
                    </ajaxToolkit:ModalPopupExtender>

我背后的代码

            string script = "";
        script += "<script type=\"text/javascript\">\r\n";
        script += "     alert('#" + divTermsScrollArea.ClientID + "');\r\n";
        script += "     jQuery('#" + divTermsScrollArea.ClientID + "').scroll(function () {\r\n";
        script += "         alert(jQuery(this).scrollTop());\r\n";
        script += "         if (jQuery(this).scrollTop() == jQuery(this)[0].scrollHeight - (jQuery(this).height() + 30)) {\r\n";
        script += "             jQuery('#" + btnAcceptTerms.ClientID + "').removeAttr('disabled');\r\n";
        script += "         }\r\n";
        script += "     });\r\n";
        script += "</script>\r\n";

        divScrollScript.InnerHtml = script;

+30是因为div上的填充

干杯乔。

Answer 1

string script = "";
script += "<script type=\"text/javascript\">\r\n";
script += "   jQuery(function() {\r\n";
script += "     jQuery(document).on('scroll', '#" + divTermsScrollArea.ClientID + "', function () {\r\n";
script += "         if (jQuery(this).scrollTop() == jQuery(this)[0].scrollHeight - (jQuery(this).height() + 30)) {\r\n";
script += "             jQuery('#" + btnAcceptTerms.ClientID + "').prop('disabled', false);\r\n";
script += "         }\r\n";
script += "     });\r\n";
script += "   });\r\n";
script += "</script>\r\n";

Answer 2

这对我花了一些时间来解决，但实际上我设法将一个show事件添加到模式弹出扩展

万一其他人遇到同样的问题我的新代码在

之下

        <script language="javascript" type="text/javascript">
            // add event handler to modal show event
            // enable accept button when scroll to bottom of terms
            function pageLoad() {
                $find('<%= mpeTerms.ClientID %>').add_shown(function () {
                    jQuery('#<%= divTermsScrollArea.ClientID %>').scroll(function () {
                        //console.log(jQuery(this).scrollTop().toString() + ' : ' + (jQuery(this)[0].scrollHeight - (jQuery(this).height() + 30)).toString());
                        if (jQuery(this).scrollTop() == (jQuery(this)[0].scrollHeight - (jQuery(this).height() + 30))) {
                            jQuery('#<%= btnAcceptTerms.ClientID %>').removeAttr('disabled');
                        }
                    });
                });
            }
        </script>

$ find（模态弹出扩展名）.add_shown（function（）{

为模态弹出窗口事件添加了一个函数，使您可以在其中运行脚本，我从http://weblogs.asp.net/yousefjadallah/archive/2010/04/15/add-shown-amp-add-hiding-modalpopupextender-events.aspx

获取了此代码

我的原始代码无法工作的原因是因为显示了页面加载上的模态，但是当弹出扩展器加载时它会隐藏它，从而使js无用。因此，当显示模态时，通过添加滚动功能，js处于活动状态：）

干杯
乔。

加载模态时注入Javascript

2 个答案: