27

私の要件は、ユーザーが入力するフォームとしてモーダル ウィンドウを表示する必要があることです。ただし、そのモーダルの高さはウィンドウ サイズを超えてはなりません。

したがって、フォームのエントリが多すぎる場合、モーダルはスクロール可能になります。問題は、フォームのエントリを検証しているときに、モーダルの最初のエントリの上にエラー メッセージが表示されることです。ユーザーが最後のプロパティである場合、エラーイベントでモーダルが一番上にスクロールされない限り、検証エラーが発生したことをユーザーは知りません。

私が試してみました ：

$(window).scrollTop();
// and
$('#modalId').scrollTop();

これはモーダルコードです:

<div class="modal hide" id="groupModal" tabindex="-1" role="dialog" aria-hidden="true" >
    <div class="modal-header">
    </div>
    <div class="modal-body" style="max-height: 300px;">
        <div class="grpForm">
            <div class="alert alert-error hide">

                <span class="errMsg"></span>
            </div>
            <div class="alert alert-success hide">

                <span class="successMsg"></span>
            </div>
            <form class = "formFieldHolder" id="groupInfoForm"></form>
          </div>
    </div>
    <div class="modal-footer">
        <button class="btn cancelFormBtn" data-dismiss="modal" aria-hidden="true" msgkey="common.cancel.label"></button>
        <button class="btn btn-primary submitGroupFormBtn" type="submit" msgkey="common.submit.label"></button>     
    </div>
</div>
4

6 に答える 6

28

$('#modalId').scrollTop(0);

scrollTop()値のみを返します。scrollTop(0)値を 0 に設定します (一番上まで)

于 2013-06-04T05:25:52.417 に答える
13

ページをモーダルまでスクロールするには、選択してモーダルhtml, bodyのオフセット上部までスクロールします

$("html, body").scrollTop($("#modalId").offset().top);

モーダル div を一番上にスクロールする場合は、

$("#modalId").scrollTop(0);

jsFiddle の例

必要に応じて、両方を組み合わせてページとモーダルをユーザーの目に見える領域にスクロールできます。

参考文献

于 2013-06-04T05:25:59.897 に答える
1 
 <script type="text/javascript">
            $(document).ready(function(){ 
            $('.scroll_top').hide();
            $(window).scroll(function(){
                if ($(this).scrollTop() > 100) {
                    $('.scroll_top').fadeIn();
                } else {
                    $('.scroll_top').fadeOut();
                }
            }); 

            $('.scroll_top').click(function(){
                $("html, body").animate({ scrollTop: 0 }, 500);
                return false;
            });

        });
</script>
于 2014-02-15T05:32:15.583 に答える
-1

ページに「jquery-1.7.1.min.js」ファイルを含める必要があります。 http://code.jquery.com/jquery-1.7.1.min.js

于 2014-02-15T05:39:46.037 に答える