2

少し問題があります。このフィドルhttp://jsfiddle.net/yXRSz/で何が起こっているかを達成しようとしています。基本的に、T&C が読み取られるとボタンが有効になります。

私が抱えている問題は、これを AjaxControlToolkit Modal ウィンドウで発生させたいということです。モーダルが表示され、スクロール バーが移動されたときに、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 () {

モーダルポップアップショーイベントに関数を追加し、そこでスクリプトを実行できるようにします-add-hiding-modalpopupextender-events.aspx

元のコードが機能しなかった理由は、ページの読み込み時にモーダルが表示されているためですが、ポップアップ エクステンダーが読み込まれるとそれが非表示になり、js が役に立たなくなります。したがって、モーダルが表示されているときにスクロール機能を追加すると、jsがアクティブになります:)

乾杯
ジョー。

于 2012-12-20T11:10:16.247 に答える