Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » jQuery » Как убрать скроллинг при открытом окне?

Как убрать скроллинг при открытом окне?

alex_kokorin 14.03.2019 jQuery, Хаки, Ламерские вопросы 1116

вопрос

Добрый день, имеются вывод модальных окон, как убрать скроллинг при открытии этого окна.
Понимаю что нужно добавить к body overflow:hidden, но как именно не догоняю.
Уже были такие вопросы, но там ничего не понятно.


function showBlockprava() {
$(function(){
    $('#prava').dialog({
        autoOpen: true,
        modal: true,
        width: 700, 

    });
});
}

<a id="top-pole-player" style="cursor:pointer" onclick="showBlockprava(); return false;">Правообладателям</a>

Ответил: alex_kokorin

Спасибо за ответ OuteerMan и deadlu.

Скрипт:

$(function () {
	$('#prava').dialog({
		autoOpen: true,
		modal: true,
		width: 700,
		open: function( event, ui ) { $('body').addClass('overflowhidecs'); }
	});
});

Стили:

.overflowhidecs {overflow: hidden !important;}

22 комментария

Юзер

114

OuteerMan - 2018-02-0714 марта 2019 10:45 - #71594

Попробуйте
http://api.jqueryui.com/dialog/#event-open
http://api.jqueryui.com/dialog/#event-close

Юзер

585

deadluk - 2018-02-0714 марта 2019 11:26 - #71595

припаять скрипт, который будет добавлять в body class с oveflow: hidden при вызове модального окна.

работа с классами в jquery

а тут, есть инструкция нужно не забывать пользоваться поиском. там идёт добавление класса (при вызове), а после закрытия модального окна, класс удаляется)

Юзер

alex_kokorin - 2018-02-0714 марта 2019 11:33 - #71596

Вы хорошо прочитали мой пост?
Я знаю что есть пост об этом, но вот только инструкция мне не подходит, у меня вывод окон через другой скрипт.
Ссылка кстати у Вас не активна, но это не проблема. Прежде чем что то писать, проверяйте в следующий раз лучше, поговорку про поспешишь я думаю не стоит вам рассказывать.

Юзер

585

deadluk - 2018-02-0714 марта 2019 11:37 - #71598

а что мешает подключить пару строк кода к Вашему скрипту? Вы написали, что имеется вывод модальных окон, но я хз каких) вот и дал подсказку как и OuteerMan. а то, что скинул инструкцию, то это да, для стандарта, но разницы не много. смотрите как там))) и ссылка у меня активна, мб у Вас она не активна ?)))

Юзер

alex_kokorin - 2018-02-0714 марта 2019 11:50 - #71601

При переходе с DLE-faq открывается вот такая ссылка
j#097;avascript/jquery-add-delete-classes, вместо
javascript/jquery-add-delete-classes

Юзер

alex_kokorin - 2018-02-0714 марта 2019 11:36 - #71597

Но в любом случае, спасибо за совет.

Юзер

alex_kokorin - 2018-02-0714 марта 2019 11:43 - #71599

При переходе по ссылке 404 ошибка)
Я и так понимаю как это должно работать - там идёт добавление класса (при вызове), а после закрытия модального окна, класс удаляется, либо можно добавлять даже не класс а просто стиль к body.
Но я не догоняю как его запихнуть в мой скрипт, потому как у меня в скрипте не прописывается кнопки открытия и закрытия, и тем самым я не знаю к чему прикрепить сам скрипт добавления классов, и где брать эти условия.

Юзер

585

deadluk - 2018-02-0714 марта 2019 11:49 - #71600

https://dle-faq.ru/faq/common/9030-kak-ubrat-skrolling-pri-otkrytom-modalnom-okne.html

через какой скрипт у Вас вывод модальных окон?

Юзер

alex_kokorin - 2018-02-0714 марта 2019 11:51 - #71602

Скрипт указан в шапке вопроса:

function showBlockprava() {
$(function(){
    $('#prava').dialog({
        autoOpen: true,
        modal: true,
        width: 700, 

    });
});
}

А это кнопка открытия:

<a id="top-pole-player" style="cursor:pointer" onclick="showBlockprava(); return false;">Правообладателям</a>

Юзер

585

deadluk - 2018-02-0714 марта 2019 11:53 - #71603

$(function () {
	$('#prava').dialog({
		autoOpen: true,
		modal: true,
		width: 700,
		open: function( event, ui ) { $('body').addClass('overflowhidecs'); }
	});
});

попробуйте, не забываем чистить кэш)

стили :

.overflowhidecs {overflow: hidden !important;}

Юзер

alex_kokorin - 2018-02-0714 марта 2019 11:58 - #71604

Большущее Вам спасибо) Работает)
Все оказалось проще чем я думал ;)

Юзер

585

deadluk - 2018-02-0714 марта 2019 12:04 - #71605

на самом деле, Вам уже помогли, когда OuteerMan скинул линк, я использовал его совет)

Юзер

alex_kokorin - 2018-02-0714 марта 2019 12:21 - #71606

Я еще не успел посмотреть его ответа)))
А может подскажите мне, как теперь совместить два условия,
Вот мой код сейчас, здесь усть условие с закрытием при нажатии вне поля

function showBlockprava() {
	$(function(){
		$('#prava').dialog({
			autoOpen: true,
			modal: true,
			width: 700,
			open: function(event, ui) {
				$('.ui-widget-overlay').bind('click', function() { 
					$('#prava').dialog('close'); 
				}); 
			}
		});
	});
}

А вот ваше условие

open: function( event, ui ) { $('body').addClass('overflowhidecs'); }

Как мне их теперь совместить ?)

Юзер

585

deadluk - 2018-02-0714 марта 2019 12:24 - #71607

амм))) его ответ самый первый, поблагодарите его) там есть, палец вверх

function showBlockprava() {
	$(function(){
		$('#prava').dialog({
			autoOpen: true,
			modal: true,
			width: 700,
			open: function(event, ui) {
				$('.ui-widget-overlay').bind('click', function() { 
					$('#prava').dialog('close'); 
				}); 
				$('body').addClass('overflowhidecs');
			}
		});
	});
}

Юзер

alex_kokorin - 2018-02-0714 марта 2019 12:26 - #71608

Спасибо еще раз большое) Работает!
Странно, я пробовал точно также, (ну вроде так же), не работало, зараза)

Юзер

585

deadluk - 2018-02-0714 марта 2019 12:27 - #71609

да пожалуйста) сам радуюсь, что у меня получается^^

Юзер

smoki - 2018-02-073 июня 2020 09:00 - #76305

Вот пытаюсь я сделать всплывающее окно таким-же методом, кнопка вызова, но не могу разобраться а как атом выводить окно ? И как ему задать заголовок в ui-dialog-titlebar

Эксперт

775

TeraMoune - 2018-02-073 июня 2020 11:07 - #76308

Читаем документацию. https://api.jqueryui.com/dialog/#option-title

Юзер

smoki - 2018-02-073 июня 2020 15:20 - #76317

Так и не понял как выводится )

Юзер

smoki - 2018-02-073 июня 2020 16:10 - #76319

smoki, разобрался

Юзер

smoki - 2018-02-073 июня 2020 16:34 - #76320

TeraMoune,
Можете подсказать как делается что бы изначально вообще весь этот код был скрыт
окно вывожу вот так {include file="test.tpl"} добавив перед </body> в main.tpl

Юзер

smoki - 2018-02-073 июня 2020 19:54 - #76329

апну