Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » jQuery » Как убрать скроллинг при открытом окне?

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


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

вопрос
Добрый день, имеются вывод модальных окон, как убрать скроллинг при открытии этого окна.
Понимаю что нужно добавить к 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 комментария

OuteerMan
Юзер

deadluk
Юзер

deadluk - 14 марта 2019 11:26 -

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

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

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

alex_kokorin
Юзер

alex_kokorin - 14 марта 2019 11:33 -

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

deadluk
Юзер

deadluk - 14 марта 2019 11:37 -

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

alex_kokorin
Юзер

alex_kokorin - 14 марта 2019 11:50 -

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

alex_kokorin
Юзер

alex_kokorin - 14 марта 2019 11:36 -

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

alex_kokorin
Юзер

alex_kokorin - 14 марта 2019 11:43 -

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

deadluk
Юзер

deadluk - 14 марта 2019 11:49 -

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

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

alex_kokorin
Юзер

alex_kokorin - 14 марта 2019 11:51 -

Скрипт указан в шапке вопроса:
function showBlockprava() {
$(function(){
    $('#prava').dialog({
        autoOpen: true,
        modal: true,
        width: 700, 

    });
});
}


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

deadluk
Юзер

deadluk - 14 марта 2019 11:53 -

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

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

стили :
.overflowhidecs {overflow: hidden !important;}

alex_kokorin
Юзер

alex_kokorin - 14 марта 2019 11:58 -

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

deadluk
Юзер

deadluk - 14 марта 2019 12:04 -

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

alex_kokorin
Юзер

alex_kokorin - 14 марта 2019 12:21 -

Я еще не успел посмотреть его ответа)))
А может подскажите мне, как теперь совместить два условия,
Вот мой код сейчас, здесь усть условие с закрытием при нажатии вне поля
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'); }

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

deadluk
Юзер

deadluk - 14 марта 2019 12:24 -

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

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
Юзер

alex_kokorin - 14 марта 2019 12:26 -

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

deadluk
Юзер

deadluk - 14 марта 2019 12:27 -

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

smoki
Юзер

smoki - 3 июня 2020 09:00 -

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

TeraMoune
Эксперт

TeraMoune - 3 июня 2020 11:07 -

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

Тестовый репозиторий установки плагинов: teramoune

smoki
Юзер

smoki - 3 июня 2020 15:20 -

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

smoki
Юзер

smoki - 3 июня 2020 16:10 -

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

smoki
Юзер

smoki - 3 июня 2020 16:34 -


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

smoki
Юзер

smoki - 3 июня 2020 19:54 -

апну

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы

наверх