Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.02.2018, 17:00
Аспирант
Отправить личное сообщение для maxg5 Посмотреть профиль Найти все сообщения от maxg5
 
Регистрация: 16.08.2016
Сообщений: 72

Добавить к body класс при открытии модального окна
Всем доброго времени суток!
На сайте 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?
Ответить с цитированием
  #2 (permalink)  
Старый 20.02.2018, 17:06
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,988

Попробуйте так:
$(".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")
});
Ответить с цитированием
  #3 (permalink)  
Старый 20.02.2018, 17:30
Аспирант
Отправить личное сообщение для maxg5 Посмотреть профиль Найти все сообщения от maxg5
 
Регистрация: 16.08.2016
Сообщений: 72

Добавил скрипт на сайт. Но не работает.
Ответить с цитированием
  #4 (permalink)  
Старый 20.02.2018, 17:35
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,988

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

Как вы открываете свои модальные окна?
Ответить с цитированием
  #5 (permalink)  
Старый 20.02.2018, 17:45
Аспирант
Отправить личное сообщение для maxg5 Посмотреть профиль Найти все сообщения от maxg5
 
Регистрация: 16.08.2016
Сообщений: 72

Открываю вот так:
<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;
    });
});
Ответить с цитированием
  #6 (permalink)  
Старый 20.02.2018, 17:53
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,988

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

В своем коде после открытия окошка добавляете:
if($(window).width()<768){ $("body").addClass("show-modal"); };

После закрытия:
if($(window).width()<768){ $("body").removeClass("show"); };
Ответить с цитированием
  #7 (permalink)  
Старый 20.02.2018, 18:17
Аспирант
Отправить личное сообщение для maxg5 Посмотреть профиль Найти все сообщения от maxg5
 
Регистрация: 16.08.2016
Сообщений: 72

нужно добавить код после 14 и после 24 строки?
Код не мой, не до оконца понятен.
Ответить с цитированием
  #8 (permalink)  
Старый 20.02.2018, 19:41
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,988

maxg5, "'visibility': 'hidden'" - закрыть окно, "'visibility': 'visible'" - открыть.
Ответить с цитированием
  #9 (permalink)  
Старый 20.02.2018, 19:55
Аспирант
Отправить личное сообщение для maxg5 Посмотреть профиль Найти все сообщения от maxg5
 
Регистрация: 16.08.2016
Сообщений: 72

Получается так? Но не работает
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;
    });
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как через javascript добавить класс элементу? LeeRoy Элементы интерфейса 1 12.06.2014 23:42
Как закрыть страницу, при клике в не области модального окна: ggosha Общие вопросы Javascript 1 19.03.2014 04:22
Исчезают значения из модального окна crescent Общие вопросы Javascript 5 09.07.2013 13:22
Обновление страница при закрытие мод. окна Юсуф Events/DOM/Window 2 14.06.2013 07:32
Координаты body относительно окна при margin auto varanio Events/DOM/Window 2 19.02.2010 10:28