2

我有一个小问题，我试图实现这个小提琴http://jsfiddle.net/yXRSz/中发生的事情，基本上它在阅读 T&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 上的填充

干杯乔。

4

2 回答 2

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";​
于 2012-12-19T12:41:13.187 回答
0

对，这花了我一些时间来解决，但实际上我已经设法在扩展的模态弹出窗口中添加了一个显示事件

以防万一其他人遇到同样的问题，我的新代码如下

        <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(modal popup exender name).add_shown(function () {

向模态弹出窗口显示事件添加一个函数，使您能够在其中运行脚本，我从http://weblogs.asp.net/yousefjadallah/archive/2010/04/15/add-shown-amp获得了此代码-add-hiding-modalpopupextender-events.aspx

我的原始代码不起作用的原因是因为显示了页面加载上的模式，但是当弹出扩展程序加载时它会隐藏它，从而使 js 无用。因此，通过在显示模式时添加滚动功能，js 处于活动状态:)

干杯
乔。

于 2012-12-20T11:10:16.247 回答