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

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


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

вопрос
Привет. Помогите сделать, чтоб при вызове модального окна 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
Юзер

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

249893 - 18 июля 2014 20:56 -

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

FastFud
Юзер

FastFud - 18 июля 2014 20:59 -

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

249893
Юзер

249893 - 18 июля 2014 21:53 -

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

FastFud
Юзер

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

249893 - 18 июля 2014 21:56 -

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

FastFud
Юзер

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

249893 - 19 июля 2014 00:04 -

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

FastFud
Юзер

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

golden_eagle_god - 19 июля 2014 11:49 -

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

golden_eagle_god
Юзер

golden_eagle_god - 19 июля 2014 14:55 -


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

249893
Юзер

249893 - 19 июля 2014 17:00 -

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

249893
Юзер

249893 - 19 июля 2014 18:30 -

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

golden_eagle_god
Юзер

golden_eagle_god - 20 июля 2014 09:32 -

Пожалуйста.

249893
Юзер

249893 - 19 июля 2014 17:47 -

сделал

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

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

наверх