Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Шаблоны (TPL) скрытие скролла при вызовк модального окна

скрытие скролла при вызовк модального окна


     18.07.2014    Шаблоны (TPL), Стили (CSS)    1489

вопрос
Привет. Помогите сделать, чтоб при вызове модального окна DLE скролл автоматически скрывался, и при его закрытие скролл автоматически появлялся

Ответил: golden_eagle_god


Вроде средствами самого UI сделать нельзя. Но можно пойти путём FastFud, но это долго и не удобно...

Сейчас расскажу как я сделал.

Зашел на сайт JQUERY UI, скачал выборочно только виджет Dialog.

Открыл несжатую версию jquery-ui.js.

Нашел строки, которые добавляют "модальность окна" (серый фон):
_createOverlay: function() {...}

Добавил перед знаком } это: $('body').addClass('scrollHide');

И нашел строки, которые удаляют эту модальность:
_destroyOverlay: function() {...}

Добавил перед знаком } это: $('body').removeClass('scrollHide');

Затем выделил код ui.dialog'а и сжал его с помощью Этого инструмента, если у вас несжатая версия jqueryui, тогда сжимать не надо.

Затем открыл jqueryui.js который был на сайте и на место старого ui.dialog'а вставил новый. Сохранил.

В цсс, дописал вот это:
body.scrollHide{overflow:hidden}

.ui-widget-overlay{background:#000;position:fixed;top:0;bottom:0;left:0;right:0;opacity:.5;-moz-opacity:.5;filter:alpha(opacity=50)}


В заключении предоставлю скриншот работоспособности:




Скачать мою версию диалога (сжатую и несжатую) можно тут -jqueryui-diagog-edited-by-golden_eagle.rar]cracksoft.ru. На прямую не подключать, так как там только диалог, без ядра и прочих компонентов...

Комментарии пользователей (15)

FastFud
50

1599 | 588

FastFud - 18 июля 2014 20:37 - Юзер

Например:
$(function(){
$( "#logindialog" ).dialog({
autoOpen: false,
show: 'fade',
hide: 'fade',
width: 300
});
});
Надо добавить modal: true, думаю что сработает (уже забыл как работает)
Должно получится так:
$(function(){
$( "#logindialog" ).dialog({
autoOpen: false,
modal: true,
show: 'fade',
hide: 'fade',
width: 300
});
});

249893
5

174 | 73

249893 - 18 июля 2014 20:56 - Юзер

нет, скролл все равно присутствует когда окно вызвано

FastFud
50

1599 | 588

FastFud - 18 июля 2014 20:59 - Юзер

Когда стоит modal: true то скролить страницу нельзя (если я не ошибаюсь) - то зачем убрать его ?

249893
5

174 | 73

249893 - 18 июля 2014 21:53 - Юзер

все равно скроллитца

FastFud
50

1599 | 588

FastFud - 18 июля 2014 21:04 - Юзер

Если вас не устраивает то наверное так:
if ($('#logindialog').dialog('open')) {
$('body').css({'overflow':'hidden'});
// or $('body').addClass('overlayHiddeScroll');
} else {
$('body').removeAttr('style');
// or $('body').removeClass('overlayHiddeScroll');
}

Если будете добавлять класс (overlayHiddeScroll) то и в css:
.overlayHiddeScroll {overflow: hidden;}

249893
5

174 | 73

249893 - 18 июля 2014 21:56 - Юзер

скрывается, но даже тогда когда окно не вызвано

FastFud
50

1599 | 588

FastFud - 18 июля 2014 22:14 - Юзер

$('#loginlink').click(function(){
$('#logindialog').dialog('open');
if ($('#logindialog').dialog('open')) {
$('body').addClass('scrollHide');
} else {
$('body').removeClass( 'scrollHide' );
}
return false;
});
css:
.scrollHide {overflow: hidden;position:relative;height:100%;}

249893
5

174 | 73

249893 - 19 июля 2014 00:04 - Юзер

какой ID на кнопку ставить?

FastFud
50

1599 | 588

FastFud - 19 июля 2014 00:23 - Юзер

#loginlink - ID кнопки, при нажатии на которой откроется #logindialog 
#logindialog - ID модального окна
<button id="loginlink">Click</button>
<div id="logindialog">Open Modal Window</div>

golden_eagle_god
26

247 | 34

golden_eagle_god - 19 июля 2014 11:49 - Юзер

Это слегка бредовый метод, так как придётся ставить на каждую кнопку такой скрипт проверки. Надо лезть в JQUERY UI и дописывать это дело там. Если получится, отпишусь

golden_eagle_god
26

247 | 34

golden_eagle_god - 19 июля 2014 14:55 - Юзер


Извините, забыл снять полосу прокрутки. вот в догонку к ответу.
Ссылка на скачивание архива тут: cracksoft.ru

249893
5

174 | 73

249893 - 19 июля 2014 17:00 - Юзер

не работает с этой версией, нужно 1.9.2? окна вообще не всплывают

249893
5

174 | 73

249893 - 19 июля 2014 18:30 - Юзер

спасибо большое

golden_eagle_god
26

247 | 34

golden_eagle_god - 20 июля 2014 09:32 - Юзер

Пожалуйста.

249893
5

174 | 73

249893 - 19 июля 2014 17:47 - Юзер

сделал

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

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