Как добавить крестик(закрытие) в модальное окно

Question

Есть модальное окно.

<div class="content">
      <button class="show_popup blue_btn" rel="popup1">Отправить письмо</button>
    </div>
    <div class="overlay_popup"></div>
    <div class="popup" id="popup1">
      <div class="object">
        <form action= "" method= ""> 
          <p>Имя: </p>
          <p><input type= "text" name= "name"></p> 
          <p>E-mail: </p><p> <input type= "text" name= "email"></p> 
          <p>Сообщение: </p>
          <p><textarea rows= "10" cols= "45" name= "message"></textarea></p> 
          <input type= "submit" value= "Отправить">
        </form>
      </div>
</div>

И скрипт

$('.show_popup').click(function() { // Вызываем функцию по нажатию на кнопку 
    var popup_id = $('#' + $(this).attr("rel")); // Связываем rel и popup_id 
    $(popup_id).show(); // Открываем окно
    $('.overlay_popup').show(); // Открываем блок заднего фона
}) 
$('.overlay_popup').click(function() { // Обрабатываем клик по заднему фону
    $('.overlay_popup, .popup').hide(); // Скрываем затемнённый задний фон и основное всплывающее окно
})

Как добавить сюда еще крестик для закрытия окна?

Answer 1

Нужно добавить блок с крестиком, дать ему класс, например, .modal_close и триггерить по клику на него функцию hide().

Как-нибудь так:


    <div class="content">
          <button class="show_popup blue_btn" rel="popup1">Отправить письмо</button>
        </div>
        <div class="overlay_popup"></div>
        <div class="popup" id="popup1">
    <div class="modal_close">&times;</div>
          <div class="object">
            <form action= "" method= ""> 
              <p>Имя: </p>
              <p><input type= "text" name= "name"></p> 
              <p>E-mail: </p><p> <input type= "text" name= "email"></p> 
              <p>Сообщение: </p>
              <p><textarea rows= "10" cols= "45" name= "message"></textarea></p> 
              <input type= "submit" value= "Отправить">
            </form>
          </div>
    </div>

Скрипт


    $('.show_popup').click(function() { // Вызываем функцию по нажатию на кнопку 
        var popup_id = $('#' + $(this).attr("rel")); // Связываем rel и popup_id 
        $(popup_id).show(); // Открываем окно
        $('.overlay_popup').show(); // Открываем блок заднего фона
    }) 
    $('.overlay_popup').click(function() { // Обрабатываем клик по заднему фону
        $('.overlay_popup, .popup').hide(); // Скрываем затемнённый задний фон и основное всплывающее окно
    })
    $('.modal_close').click(function() {
        $('.overlay_popup, .popup').hide(); 
    })

Answer 2

Дополнил Ваш html код, добавил в него кнопку закрытия модалки и так же напиал js для закрытия модалки по кнопке.



    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
    $('.js-close-popup').click(function () {
        $('.overlay_popup, .popup').hide();
    });
</script>

        <!-- Добавил кнопку закрытия модального окна -->
        <button type="button" class="close_popup js-close-popup">x</button>

        <div class="content">
            <button class="show_popup blue_btn" rel="popup1">Отправить письмо</button>
        </div>

        <div class="overlay_popup"></div>

        <div class="popup" id="popup1">
            <div class="object">
                <form action="" method="">
                    <p>Имя: </p>
                    <p><input type="text" name="name"></p>
                    <p>E-mail: </p>
                    <p><input type="text" name="email"></p>
                    <p>Сообщение: </p>
                    <p><textarea rows="10" cols="45" name="message"></textarea></p>
                    <input type="submit" value="Отправить">
                </form>
            </div>
        </div>

БЛОГ НА HUSL

Как добавить крестик(закрытие) в модальное окно

Ответы (2 шт):