Добавить к body класс при открытии модального окна

[maxg5]

Всем доброго времени суток!
На сайте http://maxg5.ru в версии для мобильный устройств при открытии модального окна .open_modaldal нужно к body добавить этот класс и убрать при закрытии.

.show {
  overflow: hidden !important;
    position: fixed;
    width:73%;
}

Я делаю так, но не работает:

$(".open_modal").on("show", function () {
  $("body").addClass("show-modal");
}).on("hidden", function () {
  $("body").removeClass("show")
});

И еще как сделать так что бы этот код работал только на экранах с шириной до 768px?

[Nexus]

Попробуйте так:

$(".open_modal").on("shown.bs.modal", function () {
  if($(window).width()<768)
    $("body").addClass("show-modal");
}).on("hidden.bs.modal", function () {
  if($(window).width()<768)
      $("body").removeClass("show")
});

[maxg5]

Добавил скрипт на сайт. Но не работает.

[Nexus]

maxg5, значит мой хрустальный шар ошибся.
Я, на основе его прогнозов, решил, что вы используете jq.modal, оказалось нет.

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

[maxg5]

Открываю вот так:

<a id="a_h" class="open_modal" href="#">Заказать обратный звонок</a></div>

jQuery(document).ready(function($) {
    $(document).on('change', '.fofm input:checkbox', function() {
        if ($(this).is(':checked')) {
            $(".fofm input[type=submit]").removeAttr('disabled');
            $('.fofm input[type=hidden].valTrFal').val('valTrFal_true');
        } else {
            $(".fofm input[type=submit]").attr('disabled', 'disabled');
            $('.fofm input[type=hidden].valTrFal').val('valTrFal_disabled');
        }
    });
    $('.close_modal, .overlay').click(function() {
        $('.popup, .popup2, .overlay').css({
            'opacity': '0',
            'visibility': 'hidden'
        });
        $('.popup > .fofm textarea').val('');
        $(':input', '.fofm').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');
        $(".fofm input[type=submit]").attr('disabled', 'disabled');
    });
    $('#a_h, #a_h1').click(function(e) {
        e.preventDefault();
        $('.popup, .overlay').css({
            'opacity': '1',
            'visibility': 'visible'
        });
    });
    $(".fofm").submit(function() {
        var str = $(this).serialize();
        $.ajax({
            type: "POST",
            url: "/wp-content/themes/theme1971/php/contact.php",
            data: str,
            success: function(msg) {
                if (msg == 'ok') {
                    $('.popup2, .overlay').css('opacity', '1');
                    $('.popup2, .overlay').css('visibility', 'visible');
                    $('.popup').css({
                        'opacity': '0',
                        'visibility': 'hidden'
                    });
                } else {
                    $('.popup2 .window').html('<h5>Ошибка</h5><p>Сообщение не отправлено, убедитесь в правильности заполнение полей</p>');
                    $('.popup2, .overlay').css('opacity', '1');
                    $('.popup2, .overlay').css('visibility', 'visible');
                    $('.popup').css({
                        'opacity': '0',
                        'visibility': 'hidden'
                    });
                }
            }
        });
        return false;
    });
});

[Nexus]

maxg5, вы открываете/закрываете модалки изменяя css свойства "руками".
Никаких вызовов событий у вас в коде нет, соответственно слушать нечего.

В своем коде после открытия окошка добавляете:

if($(window).width()<768){ $("body").addClass("show-modal"); };

После закрытия:

if($(window).width()<768){ $("body").removeClass("show"); };

[maxg5]

нужно добавить код после 14 и после 24 строки?
Код не мой, не до оконца понятен.

[Nexus]

maxg5, "'visibility': 'hidden'" - закрыть окно, "'visibility': 'visible'" - открыть.

[maxg5]

Получается так? Но не работает

jQuery(document).ready(function($) {
    $(document).on('change', '.fofm input:checkbox', function() {
        if ($(this).is(':checked')) {
            $(".fofm input[type=submit]").removeAttr('disabled');
            $('.fofm input[type=hidden].valTrFal').val('valTrFal_true');
        } else {
            $(".fofm input[type=submit]").attr('disabled', 'disabled');
            $('.fofm input[type=hidden].valTrFal').val('valTrFal_disabled');
        }
		
    });
    $('.close_modal, .overlay').click(function() {
        $('.popup, .popup2, .overlay').css({
            'opacity': '0',
            'visibility': 'hidden'
			if($(window).width()<768){ $("body").removeClass("show"); };
        });
        $('.popup > .fofm textarea').val('');
        $(':input', '.fofm').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');
        $(".fofm input[type=submit]").attr('disabled', 'disabled');
		    });
    $('#a_h, #a_h1').click(function(e) {
        e.preventDefault();
        $('.popup, .overlay').css({
            'opacity': '1',
            'visibility': 'visible'
        });
		if($(window).width()<768){ $("body").addClass("show"); }
    });
    $(".fofm").submit(function() {
        var str = $(this).serialize();
        $.ajax({
            type: "POST",
            url: "/wp-content/themes/theme1971/php/contact.php",
            data: str,
            success: function(msg) {
                if (msg == 'ok') {
                    $('.popup2, .overlay').css('opacity', '1');
                    $('.popup2, .overlay').css('visibility', 'visible');
                    $('.popup').css({
                        'opacity': '0',
                        'visibility': 'hidden'
                    });
                } else {
                    $('.popup2 .window').html('<h5>Ошибка</h5><p>Сообщение не отправлено, убедитесь в правильности заполнение полей</p>');
                    $('.popup2, .overlay').css('opacity', '1');
                    $('.popup2, .overlay').css('visibility', 'visible');
                    $('.popup').css({
                        'opacity': '0',
                        'visibility': 'hidden'
                    });
                }
            }
        });
        return false;
    });
});