HTML5 кнопка закрытия диалогового элемента не работает должным образом - PullRequest
Новая
       11

HTML5 кнопка закрытия диалогового элемента не работает должным образом

2 голосов
/ 23 февраля 2020

Я смотрю на этот вопрос post , и у меня возникают проблемы с применением его для работы в моем коде.

Меня смущает, потому что я делаю то же самое для кнопки сохранения, поскольку я являюсь кнопкой отмены (по крайней мере, часть о ее закрытии), и ничего не происходит после нажатия кнопки отмены. 

<dialog class="my-modal"> 
                <p>Add Cust</p>
                <label for="nameField">Name</label><input id=nameField><br>
                <label for="addressField">Address</label><input id=addressField><br>
                <label for="cityField">City</label><input id=cityField><br>
                <label for="stateField">State</label><input id=stateField size=2> &nbsp;
                <label for="zipField">Zip</label><input id=zipField><br>

                <br>
                <button onclick="closeAndSave()">Save</button>
                <button onclick="close()">cancel</button>
            </dialog>

function close(){
    const modal = document.querySelector('.my-modal');
    modal.close();
}

Также попытался: 

<button class="btn btn-default" data-dismiss="my-modal" aria-label="Close">Cancel</button>

1 Ответ

1 голос
/ 23 февраля 2020

Другим способом решения этой проблемы является привязка поведения к кнопкам в вашем скрипте, а не указание функциональности для кнопок со встроенным атрибутом «onclick».

«Встроенный метод onclick» может привести к непредвиденному поведению (которое может быть причиной проблемы в вашем случае). Например, если close() переопределено / переназначено где-либо еще в глобальной области видимости ваших приложений, то это приведет к вызову «неправильной функции закрытия» с помощью кнопки закрытия диалога.

Рассмотрите возможность изменения HTML и скрипт, чтобы привязка событий была делегирована вашему скрипту для лучшего контроля, как показано ниже: 

/* Obtain modal as before */
const modal = document.querySelector('.my-modal')

/* Select buttons from modal and bind click behavior */
modal.querySelector("button.cancel").addEventListener("click", () => {
  /* Call close method on modal to dismiss */
  modal.close();
});

modal.querySelector("button.save").addEventListener("click", () => {
  alert("save data");
  modal.close();
});

/* Added for snippet to prelaunch dialog */
modal.showModal();
<dialog class="my-modal">
  <p>Add Cust</p>
  <label for="nameField">Name</label><input id=nameField><br>
  <label for="addressField">Address</label><input id=addressField><br>
  <label for="cityField">City</label><input id=cityField><br>
  <label for="stateField">State</label><input id=stateField size=2> &nbsp;
  <label for="zipField">Zip</label><input id=zipField><br>
  <br>
  <!-- Replace onclick with classes to identify/access each button -->
  <button class="save">Save</button>
  <button class="cancel">cancel</button>
</dialog>

Надеюсь, это поможет!

...