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

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

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

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

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

$(".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, значит мой хрустальный шар ошибся.
Я, на основе его прогнозов, решил, что вы используете jq.modal, оказалось нет.

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

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

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

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

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

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

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

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

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

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

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

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