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

Question

[Amenov_Abdul]

Крч я даже не знаю как правильно сформулировать это, но попробую. Пишу щас сайт вот ссылка: www.bn-transit.com и у меня есть модальное окно бесплатная консультация, так вот я id на кнопку повесил и на другие кнопки на страницу там так: тыкаешь на кнопку и она задает класс active модалке, но когда тыкаешь на другие кнопки ничего не срабатывает, работает только одна кнопка. Кто понял прошу народ помогите плз.

Надо чтобы кликаешь на кнопку "оставить заявку" и модальному class="active" добавился а также и на кнопку "заказать бесплатную консультацию".

$('#trigger-consult-form').click(function() {
    $('.consult-wrapper').addClass('active');
    $('body').css({
      'overflow':'hidden'
    });
  });
  $('.consult-wrapper .close').click(function() {
    $('.consult-wrapper').removeClass('active');
    $('body').css({
      'overflow':'auto'
    });
  });

Answer 1

[Camaro67]

Вы сегодня сговорились? :) Id должен быть уникальным на всю страницу, нельзя дублировать id! Используйте вместо id какой-нибудь класс.

Comments

[Amenov_Abdul]

Уже был подобный вопрос??

[Camaro67]

Абдул Аменов, Ага))

[Amenov_Abdul]

Блииин... братан большое тебе спасибо!!! А я сижу думаю что не так то. Все заработало)))

[Camaro67]

Абдул Аменов, Так все сидят и ищут по какой причине не работает их сценарий, напрочь забывая (или вовсе не знают) про то, что id должен быть уникальным. При том что это база, которую должен знать каждый! Вот почитайте про атрибут id.

[Антон]

Camaro67, Самое забавное, что даже у опытных-бывалых бывают такие затыки, самые примитивные, за которые потом стыдно.

Answer 2

[Борис Черепанов]

Специально для этого сделал модалку. Вот ссыла
Внизу нужно кое-что переопределить

new XMC({
    bodyID: 'rara',  // id для блока с контентом
    backgroundLayerID: 'lusia',  //id для фона
    selector: 'data-type', // атрибут у кнопок которые вызывают эту модалку
    selectorValue: 'openModalForm', // Значение атрибута
    btnId: 'fbgmfClose',
    content: 'Привет', // Содержание модалки
    classListBg: ['zuzu', 'zaza'], // Классы для wrappera
    classListBody: ['zuzu', 'zaza2'], // Классы для блока с содержанием
    classListBtn: ['zuzu', 'zaza3'], // Классы для кнопки закрыть
    styleBg: {          // Стили врапера. Пишем по js-су
        top: '0',
        left:'0',
        right: '0',
        bottom: '0',
        position: 'fixed',
        background: '#00000090',
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: '6'
    },
    styleBody: {      // Стили блока с контентом. Пишем по js-су
        minWidth: '200px',
        minHeight: '200px',
        background: '#ffffff',
        justifyContent: 'center',
        alignItems: 'center',
    },
    btnStyle: {   // Стили кнопки закрыть. Пишем по js-су
        width: '40px',
        height: "40px",
        background: '#ffffff',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        top: '5%',
        right: '5%',
        cursor: 'pointer'
    }
});