Live-Beispiel
Modal anzeigen
All debug output
Result debug output
HTML-Quelltext
<!-- button -->
<button id="dialog-unique-show-button" type="button">Modal anzeigen</button>
<!-- dialog -->
<dialog id="dialog-unique">
<form method="dialog">
<header>
<strong>Ein Titel von dialog mit form</strong>
<button aria-labelledby="dialog-unique-cancel" data-action-cancel="true" value="cancel-header"></button>
</header>
<div class="dialog-content">
<p>Inhalt des "dialog mit form". Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
<label for="free-text-input" class="me-2">Texteingabe</label>
<input type="text" id="free-text-input" name="free-text-input" />
</div>
<footer>
<button id="dialog-unique-cancel" value="cancel-footer" class="me-auto">Abbrechen</button>
<button type="submit" id="dialog-unique-confirm" value="initial value">Bestätigen</button>
</footer>
</form>
</dialog>
<!-- debug output -->
<div class="frame frame-type-gesis-web-2col grid-general">
<div class="row">
<div id="output-all" class="col">
<h3>
All debug output
</h3>
</div>
<div id="output-result" class="col">
<h3>
Result debug output
</h3>
</div>
</div>
</div>
<!-- script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const dialogShowButtonElement = document.getElementById('dialog-unique-show-button');
const dialogElement = document.getElementById('dialog-unique');
if (dialogElement) {
initializeDialog(dialogElement);
const submitButton = dialogElement.querySelector('button[type="submit"]');
const textInput = dialogElement.querySelector('#free-text-input');
const allDebugOutput = document.getElementById('output-all');
const resultDebugOutput = document.getElementById('output-result');
// allow confirm-input-by-pressing-Enter-within-textInput-element
textInput.addEventListener('keydown', event => {
if (event.key === 'Enter') {
//prevent default action, which in dialog-form case would effectively cancel, not confirm the dialog
event.preventDefault();
submitButton.click();
}
});
submitButton.addEventListener('click', () => {
submitButton.value = textInput.value;
// add dialog-was-confirmed marker
dialogElement.dataset.confirmed = "true";
});
dialogElement.addEventListener('close', event => {
const returnValue = dialogElement.returnValue;
const allDebugEntryString = `<pre class="border-3 border-top border-bottom">returnValue: "${returnValue}"</pre>`;
allDebugOutput.insertAdjacentHTML('beforeend', allDebugEntryString);
const dialogWasConfirmed = (dialogElement.dataset.confirmed === "true");
let textInputValueHasChanged;
let resultDebugOutputBorderColor;
if (dialogWasConfirmed) {
textInputValueHasChanged = (returnValue === dialogElement.dataset.initialTextInputValue) ? false : true;
resultDebugOutputBorderColor = textInputValueHasChanged ? "success" : "warning";
}
else {
textInputValueHasChanged = false;
resultDebugOutputBorderColor = "danger";
}
const resultDebugEntryString = `<pre class="border-3 border-${resultDebugOutputBorderColor} border-top border-bottom">dialog confirmed? ${dialogWasConfirmed}
input value changed? ${textInputValueHasChanged}
returnValue: "${returnValue}"</pre>`;
resultDebugOutput.insertAdjacentHTML('beforeend', resultDebugEntryString);
// remove dialog-was-confirmed marker
delete dialogElement.dataset.confirmed;
});
if (dialogShowButtonElement) {
dialogShowButtonElement.addEventListener( 'click', () => {
// populate text input element with initial or latest submit value
textInput.value = submitButton.value;
dialogElement.dataset.initialTextInputValue = textInput.value;
dialogElement.showModal();
});
}
}
});
</script>