So scrollen Sie in Javascript zum oberen Rand eines modalen Fensters

Lesezeit: 4 Minuten

Benutzer-Avatar
kavinder

Meine Anforderung ist, dass ich ein modales Fenster als Formular anzeigen muss, das vom Benutzer ausgefüllt werden muss. Aber die Höhe dieses Modals sollte nicht größer als die Fenstergröße sein.

Wenn also die Eingaben im Formular zu viel sind, wird das Modal scrollbar. Das Problem ist, dass beim Validieren der Einträge im Formular die Fehlermeldung oben im Modal über dem ersten Eintrag angezeigt wird. Wenn der Benutzer endlich Eigentum ist, weiß er nicht, dass ein Validierungsfehler aufgetreten ist, es sei denn, das Modal wird beim Fehlerereignis nach oben gescrollt.

Ich habe versucht :

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

das ist der Modalcode:

<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>

  • poste deinen modalen Fenstercode

    – Chamika Sandamale

    4. Juni 2013 um 5:28 Uhr

  • Ich weiß nicht, wie ich einfach eingefügtes HTML kopieren soll, aber das wurde nicht im Inhalt der Frage angezeigt. Also habe ich den Code einfach zurückgesetzt. Lassen Sie mich die FAQ sehen und werde den Code posten, wenn ich weiß, wie es geht. Könnte dauern, weil wir jetzt an etwas arbeiten müssen.

    – kavinder

    4. Juni 2013 um 7:30 Uhr

  • Sie können Code posten, indem Sie den Code einfügen und auswählen und dann klicken {} Symbol

    – Chamika Sandamale

    4. Juni 2013 um 7:36 Uhr


  • Danke @Chamika, das ist das erste Mal, dass ich die Frage stelle, welcher Code benötigt wird, seit ich ein Profil erstellt habe

    – kavinder

    4. Juni 2013 um 9:16 Uhr

Benutzer-Avatar
Tom

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

scrollTop() gibt nur den Wert zurück; scrollTop(0) setzt den Wert auf 0 (ganz nach oben)

  • Vielen Dank für die Erklärung des Unterschieds zwischen den beiden oben genannten. Ich habe jedoch erreicht, was ich wollte, anfangs habe ich die $(‘#modalId’).scrollTop(0); aber stattdessen sollte ich $(‘#bodyId_within_modal_which_is_scrollabe’).scrollTop(0);

    – kavinder

    4. Juni 2013 um 6:01 Uhr

Benutzer-Avatar
BrunoLM

Um die Seite zum Modal zu scrollen, wählen Sie aus html, body und scrollen Sie zum versetzten oberen Rand des Modals

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

Wenn Sie das modale div nach oben scrollen möchten, verwenden Sie

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

Beispiel für jsFiddle

Sie können beides kombinieren, um die Seite und das Modal bei Bedarf in einen für den Benutzer sichtbaren Bereich zu scrollen.

Verweise

  • Dadurch wird die Seite zum oberen Rand des modalen Fensters gescrollt. aber er möchte den Inhalt von Modal scrollen

    – Chamika Sandamale

    4. Juni 2013 um 5:29 Uhr

  • Ja, wie oben gesagt, das hat mich zum oberen Rand des modalen Fensters geführt. Die direkte Verwendung von scrollTop(0) ist soweit die beste Lösung, es sei denn, es gibt einige Back-End-Komplikationen. Danke für die Antwort, obwohl dies woanders hilfreich sein könnte.

    – kavinder

    4. Juni 2013 um 6:11 Uhr

Benutzer-Avatar
Pampa-Kumpel

Dies ist eine Lösung ohne Verwendung von JQuery, zuerst erhalten Sie Ihr Modal durch die ID und dann die Funktion scrollIntoView wird an den Anfang des von Ihnen ausgewählten Elements verschoben, in diesem Fall Ihr Modal.

let element = document.getElementById('groupModal');    
element.scrollIntoView(true);

  • Während ein Ausschnitt in Ordnung ist, könnten Sie bitte näher darauf eingehen wie und warum löst dies das OP-Problem?

    – Paul Kertscher

    4. Oktober 2017 um 6:04 Uhr

 <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>

Um eine grobe Bewegung nach oben zu vermeiden, würde ich lieber (animierte Bewegung) verwenden:

$('#modalId').animate({
        scrollTop : 0
    }, 'slow');

Benutzer-Avatar
Satish N

Sie müssen die Datei „jquery-1.7.1.min.js“ in Ihre Seite einfügen.
http://code.jquery.com/jquery-1.7.1.min.js

1137150cookie-checkSo scrollen Sie in Javascript zum oberen Rand eines modalen Fensters

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy