Закрытие модального с кнопкой отправки и закрытия - PullRequest
Новая
       15

Закрытие модального с кнопкой отправки и закрытия

2 голосов
/ 30 марта 2020

Мне удалось заставить мой модал закрыться с помощью кнопки X, но я пытаюсь сделать то же самое для кнопки отправки, но может показаться, что это работает.

Это то, что я пытался 

<div id="openModal" class="modalDialog">
    <div>
    <a href="#close" title="Close" class="close">&#x2715;</a>
     <button onclick = "writeData(); getData();" href="#close" id="submitButton"> Submit </button>


.bodyclose {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    display:none;
    z-index:1;
    position:fixed;
}
.modalDialog:target {
    opacity: 1;
    pointer-events: auto;
}

.modalDialog:target > .bodyclose {
    display:block;
}

По сути, это сводится к закрытию модального режима с помощью "x", который я использовал CSS.

Для отправки, которую я пытался использовать jQuery: 

        <SCRIPT>
            $('#submitButton').submit(function(e) {
                e.preventDefault();
                $('#openModal').modal('hide');
                return false;
            });
        </SCRIPT>

Кажется, я не могу сделать submitButton регистром функции. Вы понимаете, что я делаю не так?

1 Ответ

1 голос
/ 30 марта 2020

Вы не можете использовать href с <button>.
Используйте <button onclick="window.location.href = '#close';">Submit</button>

Вместо <button onclick = "writeData(); getData();" href="#close" id="submitButton"> Submit</button>.


Вот полный код: 

<div id="openModal" class="modalDialog">
    <div>
    <a href="#close" title="Close" class="close">&#x2715;</a>
     <button onclick="window.location.href = '#close';"> Submit </button>



.bodyclose {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    display:none;
    z-index:1;
    position:fixed;
}
.modalDialog:target {
    opacity: 1;
    pointer-events: auto;
}

.modalDialog:target > .bodyclose {
    display:block;
}
...