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

Question

[hooli-gun]

Как закрывать модальное окно при клике на кнопку:

<input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit">

Сейчас закрывает при нажатии на кнопку data-dismiss="modal" и вне модального но нужно что бы и при нажатии на кнопку Отправить cf7, как это можно сделать?

<button data-target="feedback-modal" data-toggle="modal" class="btn">Discuss the project</button>

<div id="feedback-modal" class="modal">
    <div class="modal-window">
        <button data-dismiss="modal">X</button>
        <?php echo do_shortcode( '[contact-form-7 id="41" title="feedback"]' ); ?>
    </div>
</div>

.btn {
  display: inline-block;
  width: 160px;
  height: 40px;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: Montserrat,sans-serif;
  border: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  background-color: #3f5ffc;
  color: #fff;
}
.modal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    overflow: auto;
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}
.modal-window {
    position: relative;
    background-color: #fff;
    width: 50%;
    margin: 10% auto;
    padding: 20px;
}
.close {
    position: absolute;
    top: 0;
    right: 0;
    color: rgba(0,0,0,0.3);
    height: 30px;
    width: 30px;
    font-size: 30px;
    line-height: 30px;
    text-align: center;
}
.close:hover,
.close:focus {
    color: #000000;
    cursor: pointer;
}
.open {
    display: block;
}

document.addEventListener('click', function (e) {
    e = e || window.event;
    var target = e.target || e.srcElement;

    if (target.hasAttribute('data-toggle') && target.getAttribute('data-toggle') == 'modal') {
        if (target.hasAttribute('data-target')) {
            var m_ID = target.getAttribute('data-target');
            document.getElementById('feedback-modal').classList.add('open');
            e.preventDefault();
        }
    }

    // Close modal window with 'data-dismiss' attribute or when the backdrop is clicked
    if ((target.hasAttribute('data-dismiss') && target.getAttribute('data-dismiss') == 'modal') || target.classList.contains('modal')) {
        var modal = document.querySelector('[class="modal open"]');
        modal.classList.remove('open');
        e.preventDefault();
    }
}, false);

Answer 1

[andand44]

Если просто, то добавить data-dismiss="modal" input

<input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" data-dismiss="modal">

Но правильнее закрывать окно по событию отправки формы, а не по клику на кнопку отправки.

Comments

[hooli-gun]

А как это сделать?

[andand44]

form.submit();
https://learn.javascript.ru/forms-submit

document.getElementById('form').addEventListener('submit', function(e){
    var modal = document.querySelector('[class="modal open"]');
    modal.classList.remove('open');
})

Как-то так