8

多くのコンテンツ (利用規約) を読み込んでいる jQueryui ダイアログがあり、コンテンツがオーバーフローするとスクロールバーが表示されます。これは私が望むとおりです。ただし、ダイアログが開いたら、スクロールバーを一番上にしたいと思います（ユーザーが上にスクロールしなくても最初から読むことができるようにするため）。ダイアログの設定は

$(function() 
{
$( "#tos_dialog" ).dialog({
    title: 'Terms Of Service Agreement',
autoOpen: true,
height: 480,
    width: 640,
modal: true,
    show: "blind",
hide: "explode",
    buttons: {
       "I Accept": function() {
        $( this ).dialog( "destroy" );
                $("#login_container").dialog( "destroy" );
                window.location.replace('/main.php');
    },
            "I Decline": function() {
                $( this ).dialog( "destroy" );
            }
        }
    });

私は autoOpen を true と false の両方に設定して試しました。次のコードをすべて試して、コンテンツを一番上までスクロールしようとしました。

  $("#tos_dialog").show()
  $("#tos_dialog").scrollTop();
  $( ".ui-dialog" ).show();
  $( ".ui-dialog" ).scrollTop();
  $(".ui-widget-content").show();
  $(".ui-widget-content").scrollTop();
  $("body").scrollTop();
  $('#tos_dialog', window.parent.document).scrollTop(0);

残念ながら、上記のどれも機能していないようです。また、dialogOpen とダイアログのサイズ変更の両方で、ダイアログのバインドされたイベントに上記を入れてみましたが、役に立ちませんでした。どんな助けでも大歓迎です。

4

7 に答える 7

7

試す

$("#the_dialog_div").scrollTop("0")

これは私のために働いた！

于 2012-05-31T19:27:25.920 に答える
6

これは私のために働いています

$(function() 
{
 $( "#tos_dialog" ).dialog({
  title: 'Terms Of Service Agreement',
  autoOpen: true,
  height: 480,
  width: 640,
  modal: true,
  show: "blind",
  hide: "explode",
  buttons: {
   "I Accept": function() {
    $( this ).dialog( "destroy" );
      $( "#login_container" ).dialog( "destroy" );
      window.location.replace('/main.php');
   },
   "I Decline": function() {
      $( this ).dialog( "destroy" );
   }
  },
  open: function() {
    //Solution HERE
    $( ".ui-dialog-content" ).scrollTop(0);
    //End of Solution
  }
});
于 2013-02-15T18:31:43.367 に答える
3

試す： 

setTimeout(function(){
   $('#selector').scrollTop("0");
},100);
于 2013-01-29T07:02:30.693 に答える
1

わかりましたので、これを機能させるためのハッキングされた方法をついに見つけました。人々は scrollTop("0") および/または潜在的に他のものを使用できるようですが、これらのどれも私にとってはうまくいきませんでした。これがあなたにも当てはまる場合は、次のことを試してください。

nbsp とのリンクを作成します。そのテキストとして (そのため、すぐにリンクのようには見えません)。これを、表示したいダイアログの表示領域の最初の HTML にします (私の場合は、ダイアログに表示される利用規約の一番上です)。

次に、ダイアログを宣言するときに、パラメーターとして open 関数を追加し、行を含めて要素内のすべてのリンクをぼかし、上部のリンクにフォーカスを設定します。以下は、私のために働く初期化コードです。

$(function() {
    $( "#tos_dialog" ).dialog({
  title: 'Terms Of Service Agreement',
        autoOpen: false,
      height: 480,
  width: 640,
        modal: true,
    show: "blind",
        hide: "explode",
  open: function () 
  { 

    $('.ui-dialog-relative :link').blur();
    //setTimeout(function() { $('#tos_top').focus();}, 4000);
    $('#tos_top').focus();
  },
  focus: function(event, ui) {$('#tos_top').focus(); },
  buttons: {
            "I Accept": function() {
                $( this ).dialog( "destroy" );
      $("#login_container").dialog( "destroy" );
      window.location.replace('/nextpage.php');
            },
            "I Decline": function() {
                $( this ).dialog( "destroy" );
            }
        }
    });
    $( "#tos_dialog" ).dialog("open");
});

これが、何らかの理由で最初に標準的な方法を機能させることができない最後のオプションとして他の人に役立つことを願っています.

于 2012-07-05T12:41:24.800 に答える
1

私の場合、私は持っている#dialog modal:trueので、上記のどれもうまくいきませんでした。

body要素が実際にスクロールされたものであることがわかったので、次のことを行ったところ、完全に機能しました。

$( "#timeWindowDialog" ).dialog({
     autoOpen: false,
     modal: true,
     open : function() {
       $('body').scrollTop(0);
     }
});
于 2014-04-08T17:22:36.907 に答える
1

私はこれと同じ問題を抱えていました。私のjquery-ui dialog()は、ダイアログのコンテンツの一番下までスクロールして開きます。私の同僚は、これはコンテンツの下部にボタン/リンクがあったためだと示唆しました。

また、それが機能しないこともわかりました$("#dialog").scrollTop("0")。

このページを見つけて、prepend() を使用してダイアログ コンテンツの先頭にリンクを追加してから、 を呼び出してみfocus()ました。これは、ダイアログイベントblur()でまったく使用せずに機能しました。open()

IE10 では、リンクがダイアログの左上に 1 本の下線として視覚的に表示されていましたが、これは気にしませんでした。

リンクはまったく必要ないことがわかりました。$("#dialog").focus()ページの上部までスクロールするのに十分でした。これは FireFox と IE10 でテストされました。

解決 ：

var mydialog = $("<div id='mydialog'>Here is some exceptionally long content which will overflow.</div>");
$("body").append(mydialog);
mydialog.dialog({open : function(event, ui) {
mydialog.focus();
}
});

HTH

于 2013-02-13T03:07:04.933 に答える
0

オープニングのdialog()関数に次を追加すると、非常にうまく機能しました(サイズが大きすぎる場合にのみ、ダイアログ内をスクロールします:

$('#dialog-form').dialog({
    height: 500,
    width: 600,
    modal: false, // works with modal true and false
    open: function () 
        {
            $('#dialog-form').scrollTop(0);
        },

このハンドラーが設定される前にダイアログが自動的に開くと、機能しない可能性があります。

于 2016-09-07T08:34:00.937 に答える