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

DLE FAQ » Все вопросы » Шаблоны (TPL) » скрытие скролла при вызовк модального окна

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

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

вопрос

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

Юзер

1599

FastFud - 2015-04-1818 июля 2014 20:37 - #32027

Например:

$(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
});
});

Юзер

193

249893 - 2015-04-1818 июля 2014 20:56 - #32034

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

Юзер

1599

FastFud - 2015-04-1818 июля 2014 20:59 - #32039

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

Юзер

193

249893 - 2015-04-1818 июля 2014 21:53 - #32054

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

Юзер

1599

FastFud - 2015-04-1818 июля 2014 21:04 - #32041

Если вас не устраивает то наверное так:

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;}

Юзер

193

249893 - 2015-04-1818 июля 2014 21:56 - #32055

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

Юзер

1599

FastFud - 2015-04-1818 июля 2014 22:14 - #32057

$('#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%;}

Юзер

193

249893 - 2015-04-1819 июля 2014 00:04 - #32082

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

Юзер

1599

FastFud - 2015-04-1819 июля 2014 00:23 - #32087

#loginlink - ID кнопки, при нажатии на которой откроется #logindialog 
#logindialog - ID модального окна

<button id="loginlink">Click</button>
<div id="logindialog">Open Modal Window</div>

Юзер

250

golden_eagle_god - 2015-04-1819 июля 2014 11:49 - #32123

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

Юзер

250

golden_eagle_god - 2015-04-1819 июля 2014 14:55 - #32137

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

Юзер

193

249893 - 2015-04-1819 июля 2014 17:00 - #32152

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

Юзер

193

249893 - 2015-04-1819 июля 2014 18:30 - #32161

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

Юзер

250

golden_eagle_god - 2015-04-1820 июля 2014 09:32 - #32195

Пожалуйста.

Юзер

193

249893 - 2015-04-1819 июля 2014 17:47 - #32157

сделал

mondolfo | Шаблон waitlogin при авторизации через с ...

mondolfo
Шаблон waitlogin при авторизации через соцсеть?
Вчера, 01:31

/engine/modules/social.php
TeraMoune | Как изменить вывод custom по нескольким ... ¹¹

TeraMoune
Как изменить вывод custom по нескольким тегам?
28-10-2024, 01:05

Я же написал, продублирую: нужно использовать [[:punct:]]

И проблема в условии проверяющее версию mysql, можно поменять местами true и false, изменить знак меньше на больше или вовсе убрать код строки с version_compare и оставить ту строку кода $tempArray[] где используется [[:punct:]].

В статье также указано, что важно использовать экранирование, собственно, что и указано в методе по исправлению ошибки.
Статья по решению проблемы

Там у человека совершенно другое условие поиска. Он не теги ищет которые строго разделены запятыми, он просто слова ищет и ему как раз подойдёт граница слова. И это когда-то давно поиск был разделяя по границе слова, теперь есть character_class и используется другой метод. Но это не отменяет того, что вы нашли вопрос и решение которое никак не связано с темой новости поиска новостей с наличием тегов.
homa152 | Как изменить вывод custom по нескольким ... ¹¹

homa152
Как изменить вывод custom по нескольким тегам?
27-10-2024, 23:33

Если вы готовы предложить какое-то решение для исправление проблемы 3685, отлично. Иначе к сожалению на последних версиях MySQL хак не рабочий, согласно вашему трактату.
homa152 | Как изменить вывод custom по нескольким ... ¹¹

homa152
Как изменить вывод custom по нескольким тегам?
27-10-2024, 23:20

Я буквально 2 часа назад столкнулся с проблемами при установке этого хака, проблема была именно в ошибке 3685, сайт не просто переставал работать, использовалась стандартная заглушка при критических ошибках MySQL исправить получилось методом описанным выше, для версия до 8 хак работает исправно, но выше, требуется доработка, так как синтаксис считается ошибочным, вы можете проверить самостоятельно.

В статье также указано, что важно использовать экранирование, собственно, что и указано в методе по исправлению ошибки.
Статья по решению проблемы
TeraMoune | Как изменить вывод custom по нескольким ... ¹¹

TeraMoune
Как изменить вывод custom по нескольким тегам?
27-10-2024, 22:32

Напротив нужно использовать [[:punct:]] вместо скобок, про это написано в документации на которую вы ссылаетесь. А \b означает границу слова и не способен правильно отображать результаты. Граница слова это когда выражение будет находить отдельные слова. Например новость имеет теги (Социальная сеть, Блокировка) и tags REGEXP '\\b(сеть)\\b' найдёт новость с тегом Социальная сеть, а так же Рыбацкая сеть и в принципе найдёт все новости где присутствует слово "Сеть" и будет много лишних результатов, а не только нужные.

В хаке как раз присутствует проверка на старую версию и новую mysql и в каждом случае используется тот вариант который является валидным для используемой версии.
homa152 | Как изменить вывод custom по нескольким ... ¹¹
homa152
Как изменить вывод custom по нескольким тегам?
27-10-2024, 21:30
Добавлю касаемо обновления архитектуры MySQL
При добавлении хака с версии MySQL 8.0, возможно появление ошибки: 3685. Неверный аргумент для регулярного выражения.

Можно пофиксить самостоятельно внеся корректировки в сам хак из панели админа.

Строку:
```
$tempArray[] = "tags REGEXP '[[:<:]](" . $value  . ")[[:>:]]'";
```
Заменить на:
```
$tempArray[] = "tags REGEXP '\\\\b(" . $value  . ")\\\\b'";
```
Согласно справочному руководству MySQL 8.0 / ... / Регулярные выражения, «MySQL поддерживает регулярные выражения с помощью международных компонентов для Unicode (ICU)».

То есть, вместо "[[:<:]] и [[:>:]]", нужно использовать: "\b"
vitnet | Есть ли возможность изменить язык сайта? ¹

vitnet
Есть ли возможность изменить язык сайта?
25-10-2024, 16:22

Ну как вариант можно использовать тег {lang text=***} подробнее

{lang text="LANG_PARAMETER"}

Данный тег предназначен для вывода информации из языкового файла website.tpl, который в данный момент используется, где LANG_PARAMETER это значение параметра, который необходимо вывести. Например, тег {lang text="attach_images"} выведет надпись “Прикрепить изображения” из языкового пакета, в случае использования русского языка и если используется английский язык, то “Attach Images”
vitnet | Есть готовый модуль рейтинга комментарие ... ¹
vitnet
Есть готовый модуль рейтинга комментариев?
25-10-2024, 13:12
Вариант 1 (вручную)

1.0 Открываете файл engine/modules/show.full.php находите в нем
```
$where_approve . " ORDER BY " . PREFIX . "_comments.id " . $comm_msort;
```
И меняете здесь id на rating
Пример:
```
$where_approve . " ORDER BY " . PREFIX . "_comments.rating " . $comm_msort;
```
2.0 Затем переходите в админку /admin.php?mod=options&action=syscon --> Настройки комментариев --> Порядок сортировки комментариев --> По убыванию

2.1 Далее --> Тип рейтинга комментариев выставляете "Нравится или Не нравится"

Готово!

Вариант 2 (плагин)
Для просмотра содержимого спойлера, перейдите к выбранному событию.

Graf | Как сделать аякс кнопку "загрузить еще"? ²

Graf
Как сделать аякс кнопку "загрузить еще"?
23-10-2024, 16:03

Вот рабочий пример со скрытие пагинатора и кнопки.
Полный код файла navigation.tpl

[not-available=userinfo]
<div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div>

<nav class="navigation"[available=lastcomments] style="padding: 4% 8%;"[/available]>
	<div class="page_next-prev">
		<span class="page_prev" title="Предыдущая страница">
			[prev-link]<svg class="icon icon-left"><use xlink:href="#icon-left"></use></svg>[/prev-link]
		</span>
		<span class="page_next" title="Следующая страница">
			[next-link]<svg class="icon icon-right"><use xlink:href="#icon-right"></use></svg>[/next-link]
		</span>
	</div>
	<ul class="pagination">
		{pages}
	</ul>
</nav>
<script type="text/javascript">
$(document).ready(function(){
    
         $('body').on('click','#nav-load a',function(){
        var urlNext = $(this).attr('href');
        var scrollNext = $(this).offset().top - 200;
        if (urlNext !== undefined) {
            $.ajax({
                url: urlNext,
                beforeSend: function() {
                    ShowLoading('');
                },            
                success: function(data) {
                    $('.navigation').remove();
                    $('#nav-load').remove();
                    $('#dle-content').append($('#dle-content', data).html());
                    $('#dle-content').after($('#bottom-nav'));
                    window.history.pushState("", "", urlNext);
                    $('html, body').animate({scrollTop:scrollNext}, 800);    
                    HideLoading('');
                },
                  error: function() {                
                    HideLoading('');
                    alert('что-то пошло не так');
                  }
            });
        };
        return false;
    });
    
});
</script>
[/not-available]

vitnet | Как перенести категории в DLE? ²

vitnet
Как перенести категории в DLE?
22-10-2024, 11:30

Для начала проверьте наличие файла /engine/cache/system/category.php и если он был до замены БД то удалите его а ещё лучше очистить кеш.

наверх

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

Ответил: golden_eagle_god

15 комментариев

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

Подскажите как заменить стандартный скролл на свой

Как сделать модальные окна фиксированные и расположение внизу

Как сделать чтоб модальные окна не перетаскаивались

(Добавление файлов) модальное ajax окно и iframe внутри него

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

Где используются popup-окна помимо profile_popup.tpl

Модальное окно .tpl существует ли?

Модальные окна в DLE 10.3

При вызове модального окна фон размытый

Разные окна категории и подкатегории?