26
Фев
2022

Открытие модального окна разными кнопками

Нужен простой скрипт для отрытия одной модалки с формой при нажатии на разные кнопки с одинаковым id.

.modal.active {display: block;}
#open {cursor: pointer;}
.modal {
    display: none;
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background: rgba(25, 25, 25, .5);
    padding: 0 50px;
    & .modal-form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        transform: translateY(-35%);
        -webkit-transform: translateY(-35%);
        -moz-transform: translateY(-35%);
        -ms-transform: translateY(-35%);
        -o-transform: translateY(-35%);
        position: relative;
        min-width: 320px;
        max-width: 530px;
        min-height: 530px;
        max-height: 730px;
        padding: 35px;
        background: #FFFFFF;
        border-radius: 20px;
        margin: 0 auto;
        top: 35%;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -ms-border-radius: 20px;
        -o-border-radius: 20px;
        @media(max-width: 800px) {
            padding: 15px;
        }
    }
<div class="modal" id="modal">
        <form action="#" class="modal-form" id="modal-form">
            <h2 class="modal-title">Оставьте свои контактные данные</h2>
            <span class="modal-desc">Мы свяжемся с Вами в ближайшее время</span>
            <input name="phone" type="tel" class="putPhone" placeholder="Номер телефона или номер WhatsApp" required>
            <input type="text" class="putName" name="name" placeholder="Ваше имя" required>
            <input type="text" class="putLink" name="name" placeholder="Ссылка на ваш проект (сайт или соц.сети)" required>
            <div class="inputItem">
                <input type="checkbox" name="checkme" id="agree" class="agree"> <p>Нажимая на кнопку «отправить», вы даете согласие на обработку своих персональных данных. <a href="#">Политика конфиденциальности</a></p>
            </div><!-- /inputItem -->
            <input type="submit" id="continue" class="btn" value="Отправить">
            <input type="hidden" name="formData" value="Заявка с сайта">
        </form>
</div><!-- /modal --> 

Есть такой скрипт но он открывает только с одной кнопки

$(function () {
    $('#open').click(function () {
      $('.modal').addClass('active');
      $('body').addClass('lock');
    });
   
    // $('.modal__close-button').click(function () {
    //   $('.modal').removeClass('active');
    // });
});

$('.modal').mouseup(function (e) {
    let modalContent = $(".modal-form");
    if (!modalContent.is(e.target) && modalContent.has(e.target).length === 0) {
    $(this).removeClass('active');
    $('body').removeClass('lock');
    }
});

Источник: https://ru.stackoverflow.com/questions/1385945/%D0%9E%D1%82%D0%BA%D1%80%D1%8B%D1%82%D0%B8%D0%B5-%D0%BC%D0%BE%D0%B4%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B3%D0%BE-%D0%BE%D0%BA%D0%BD%D0%B0-%D1%80%D0%B0%D0%B7%D0%BD%D1%8B%D0%BC%D0%B8-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B0%D0%BC%D0%B8

Тебе может это понравится...

Добавить комментарий