Открыть по кнопке popup, закрыть кликом по свободному месту от дочернего блока в popup?

Question

[Чёкатилло]

Родительским блоком является popup =),
а закрыть popup надо кликом по свободному месту от дочернего блока находящегося внутри popup (типа, закрыть кликом по фону позади дочернего блока). При этом, при открытом popup должна быть возможность скролла в нем, а на html вешать overflow: hidden

Казалось бы, все обычно, но для меня нет =)
Еще фишка в том, что верстка этого всего находится в плагине (туда не надо лезть/он обновляется)
И надо воздействовать на все это с помощью jquwery

Имеется мааааленькая такая вот заготовочка

Пожалуйста, сделайте с этим что нибудь =)
Спасибо за внимание!

Answer 1

[Игорь Безлепкин]

Сформулируй вопрос в виде задач. Я так понял проблемы две?

Comments

[Чёкатилло]

Ну если то, что блок, который на надо открыть, сделав из него popup, находится в плагине Вордпресс проблема, то да =)
Сам сайт на Вордпресс, кажется зря не уточнил =)

По верстке в заготовке видно, что мы имеем:
- всего один блок #rcl-tabs с дочерним в нем блоком #lk-content
- и кнопку #but, по которой будем вызывать #rcl-tabs (наш воображаемый popup)

Задача с помощью Jquery:
- открыть (заранее закрытый) блок (#rcl-tabs) кликом по отдельно стоящей кнопке
- в #rcl-tabs есть вертикальный скролл, позволяющий скроллить его дочерний блок внутри (#lk-content), но еще надо, при открытом #rcl-tabs вешать на тег html- overflow: hidden
- закрыть #rcl-tabs не по какой либо кнопке, а только по свободному месту относительно дочернего блока #lk-content (это самое важное)

Вроде все
Спасибо за внимание =)

[Игорь Безлепкин]

- закрыть #rcl-tabs не по какой либо кнопке, а только по свободному месту относительно дочернего блока #lk-content (это самое важное)

вешаешь обработчик событий на document и смотришь, если клик был не на нужный элемент, делаешь закрытие.

$(document).click(function(e){
    if ($(e.target).parents().filter("#id-элемента:visible").length != 1) {
        вызываешь функцию скрытия того чего хочешь.
    }
  });

[Чёкатилло]

Игорь Безлепкин, уж я извиняюсь, в скриптах не разбираюсь =)
Будьте любезны, хотя бы примерно продемонстрировать, как должно быть в строках, что касаются "вызываешь функцию скрытия того чего хочешь."

[Чёкатилло]

Игорь Безлепкин, и здесь ("#id-элемента:visible") получается этот блок родительский #rcl-tabs?

[Игорь Безлепкин]

Тогда копируйте свой код в jsfiddle, из таких записей #rcl-tabs ничего не понятно.

Тот скрипт то что я написал, это самые азы js и jqery, нужно учить :)

[Чёкатилло]

Ну я я художник короче =)
Типа так как-то
Конечно же оно не работает Это что смог набросал )

[Игорь Безлепкин]

Во-первых ты не подключил Jquery

Вот грубый рабочий вариант

jsfiddle.net/ppfq99uv/2

Не надо лепить в тегах id везде. class для стилизации, id и data для Javascript.

[Чёкатилло]

Игорь Безлепкин, Спасибо сэнсэй )

[Игорь Безлепкин]

Баба Яга, поставь "Нравится" :)

[Чёкатилло]

Игорь Безлепкин, присоединяйся к дальнейшему решению вопроса Открыть блок по кнопке/закрыть кликом по свободному полю от контента блока?
=)