jquery - сделать так, чтобы тумблер отображался над телом, когда тело затемнено

#jquery #button #toggle

#jquery #кнопка #переключить

Вопрос:

Я использую этот скрипт https://github.com/andywer/jquery-dim-background чтобы затемнить мою страницу с помощью тумблера. Однако, когда страница была затемнена, я теряю возможность переключать переключатель. Мой код приведен ниже. Вы также можете просмотреть его в действии здесь http://www.fospower.com/test

Любая помощь приветствуется.

 $(function() {
    $('input#lightswitch').iToggle({
        easing: 'easeOutExpo',
        onClickOn:function() {
            //$('input:checkbox').addClass('iT_checkbox_on');
            $('input:radio').addClass('iT_checkbox_on');
            $(this).dimBackground({
                darkness:0.8
            }, function() {

            });
        },
        onClickOff:function() {
            //$('input:checkbox').removeClass('iT_checkbox_on');
            $('input:radio').removeClass('iT_checkbox_on');
            $(this).undim();
        }
    });
});

Ответ №1:

Если вы просто добавите pointer-events:none; к встроенному css .dimbackground-curtain , вы сможете нажать на переключатель.

Ответ №2:

Похоже, что z-индекс слоя занавеса, генерируемого скриптом jquery, помещает его над другими вашими элементами, такими как тумблер. Попробуйте настроить z-индекс вашего тумблера в ваших функциях, чтобы переключатель перемещался наверх, когда применяется «занавес», и переворачивался, когда «занавес» снимается.