Как отключить полосы прокрутки в диалоговом окне пользовательского интерфейса jQuery?

Кто-нибудь знает, есть ли способ отключить полосы прокрутки в диалоговом окне jquery? Содержимое, которое у меня есть в div, составляет 300 пикселей, но диалоговое окно установлено на 200 пикселей. Он автоматически ставит полосы прокрутки, но я их не хочу. Я сам добавлю его во второй div, который сделает его больше, чем окно. Любая помощь приветствуется.


scroll dialog jquery jquery-ui
person ngreenwood6    schedule 25.10.2009    source источник

Ответы (7)


arrow_upward
10
arrow_downward

Вы имеете в виду диалоговое окно jQuery UI?

Вы можете передать параметр при его создании, чтобы указать его высоту, например.

$('.selector').dialog({ height: 350 });

Сделайте его выше, чем контент, который вы в него вкладываете, и я подозреваю, что вы будете золотыми.

person Paul D. Waite    schedule 21.12.2009

arrow_upward
73
arrow_downward

Я решил проблему следующим образом:

.dialog({
  title: $(this).attr("data-dialog-title"),
  closeOnEscape: true,
  close: function () { $(this).remove() },
  draggable: true,
  position: 'center',
  width: 500,
  height: 'auto',
  modal: true,
  open: function (event, ui) {
    $('#myDialogId').css('overflow', 'hidden'); //this line does the actual hiding
  }
});
person MUG4N    schedule 20.09.2011
comment
Можете ли вы объяснить, что вы сделали, чтобы отключить полосу прокрутки? - person Meow; 26.01.2012
comment
Просто добавляю быструю поправку для комментаторов в этот конкретный ответ (который я использовал, спасибо, чувак). То, что удаляет полосы прокрутки, скрывает переполнение с помощью этой хитрости css, очень гладко. Эта часть скрывает: open: function (event, ui) { $('#myDialogId').css('overflow', 'hidden'); } - person unrealtrip; 26.10.2012
comment
Я бы предложил использовать this для ссылки на элемент HTML с диалоговым окном, поэтому: $(this).css('overflow', 'hidden'); - person 7ochem; 08.01.2014
comment
Скрывать вещи, чтобы они не появлялись, - не лучшее решение. - person Augunrik; 02.11.2015
comment
Здорово иметь возможность использовать {height: 'auto'} и при этом предотвратить прокрутку. Спасибо за это. +1 - person Adrian Larson; 10.11.2016

arrow_upward
5
arrow_downward

Я не знаю точно, что вы подразумеваете под «диалоговым окном jquery», но стандартным способом отключения полос прокрутки было бы установить для свойства переполнения div значение «скрытый»

поместите это в свой файл css:

div.class_name {
  overflow: hidden;
}
person Community    schedule 25.10.2009
comment
jquery (своего рода оболочка javascript) имеет собственные диалоговые окна. в jquery есть варианты, чтобы делать подобные вещи, но я не нашел их для этого конкретного плагина. я не могу просто установить это свойство для jquery - person ngreenwood6; 25.10.2009
comment
jquery не является оболочкой javascript, это фреймворк, который абстрагирует кросс-браузерные проблемы и упрощает обход DOM... если вы можете указать, какую функцию jquery вы используете для создания "диалогового окна", тогда я мог бы помочь.. . - person ; 26.10.2009
comment
Не уверен, почему за это так сильно проголосовали, когда это правильный способ ведения дел. .ui-dialog-content { overflow: hidden; } для отключения полос прокрутки во всех диалогах. #myDialogID { overflow: hidden; } всего за один. - person David Sherret; 30.03.2013
comment
да, и лучше сделать все настройки в файле css, чем делать это с помощью обратных вызовов javascript, как в http://stackoverflow.com/a/7483426/1627888 - person Yo Ludke; 30.04.2014

arrow_upward
3
arrow_downward

Переполнение: скрытое сработало для меня. При установке только параметров высоты/ширины полосы прокрутки все равно будут отображаться в зависимости от размера текста и масштабирования.

person DoctorEJB    schedule 08.05.2013

arrow_upward
3
arrow_downward

Решение без css или фиксированной высоты:

Я думаю, что лучшим решением вышеуказанной проблемы является динамическая высота диалогового окна, высота должна автоматически регулироваться в соответствии с содержимым, когда содержимое увеличивается, модальная высота должна увеличиваться. Для этого используйте параметр высоты «авто», предоставляемый модальным пользовательским интерфейсом Jquery, он регулирует модальную высоту в соответствии с содержимым, поэтому необходимо добавить «переполнение: скрытый» или «высота: 350».

$( "#dialog" ).dialog({
modal : true,
height:"auto"

});
person Sanjeev    schedule 26.08.2014

arrow_upward
1
arrow_downward

Это удалило полосы прокрутки:

$( "#dialog" ).dialog({
    autoOpen: false,
    resizable: false,
    dialogClass: 'info',
    height: 'auto',
    width: 'auto',
    show: { effect: "blind", duration: 1000 },
    hide: {effect: "explode", duration: 1000 },
    draggable: true,
    open: function (event, ui) {
        $(this).dialog('open');
    },
    close: function (event, ui) {
        cleanup() ;
    }
});
person smac2020    schedule 06.08.2014

arrow_upward
0
arrow_downward

В приведенном ниже примере я также добавил «изменяемый размер = ложь» для диалогового окна. Так что любой текст переполнения не может быть виден при изменении размера диалогового окна.

$("a#registerServerStudio , a#regServer").click(function(e) {
    //alert("login using POST is Clicked");
    e.preventDefault();
    registerSuccess = false;

    regSSDlg = $("#regSS").dialog({
      autoOpen: false,
      height: 280,
      width: 420,
      modal: true,
    resizable: false,
      buttons: {
      },
      close: function() {
        registerSuccess = false;
      },
    show:{effect:'bounce', duration: 100},

    });
  $('#regSS').css('overflow', 'hidden');
    regSSDlg.prev(".ui-dialog-titlebar").css({"background":"#47669E", "color":"white", "font-size":"13px", "font-weight":"normal"}) ;

    regSSDlg.dialog("open");
});
person Rahul Varadkar    schedule 13.06.2017