How to close the new html tag by clicking on its ::backdrop

Question

I didn't find any built in solution or workaround for closing the html5 <dialog> element by clicking on its background(::backdrop), although it's clearly a basic functionality.

Answer 1

Backdrop clicks can be detected using the dialog bounding rect.

var dialog = document.getElementsByTagName('dialog')[0];
dialog.showModal();
dialog.addEventListener('click', function(event) {
  var rect = dialog.getBoundingClientRect();
  var isInDialog = (rect.top <= event.clientY && event.clientY <= rect.top + rect.height &&
    rect.left <= event.clientX && event.clientX <= rect.left + rect.width);
  if (!isInDialog) {
    dialog.close();
  }
});

<dialog>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

Answer 2

Another simple method similar to the wrapped div method mentioned by others is to give the dialog itself padding: 0 (as Chrome tends to give the dialog padding, for example) and add the click event to the dialog. The form element picks up the difference anyway so there's no need for an extra div. I've noticed the form wasn't used in any examples above so I thought this would be worth throwing in as it's part of the standard when working with buttons in a dialog.

function onClick(event) {
  if (event.target === dialog) {
    dialog.close();
  }
}

const dialog = document.querySelector("dialog");
dialog.addEventListener("click", onClick);
dialog.showModal();

form {
  max-width: 200px;
}

<button onclick="window.dialog.showModal()">Open dialog</button>

<dialog id="dialog" style="paddinag: 0; border: 0;">
  <form method="dialog">
    <div>Hello from dialog element. You can close me by clicking outside or Close button</div>
    <button>Close</button>
  </form>
</dialog>

Demo on CodePen

Answer 3

Another more efficient solution is to wrap the dialog-content in a div with padding: 0. This way you can check for event.target of the click-event, which references the dialog in case of backdrop and any other element within the div in case of the actual modal.

By not checking the actual dimensions, we can prevent layout cycles.

Answer 4

You can't listen to click event on dialog ::backdrop by definition:

The showModal() method of the HTMLDialogElement interface displays the dialog as a modal, over the top of any other dialogs that might be present. It displays into the top layer, along with a ::backdrop pseudo-element. Interaction outside the dialog is blocked and the content outside it is rendered inert.

The semantically appropriate approach to close modal dialog by clicking outside is to inspect the event.target as suggested in this answer and implemented in this answer which can be simplified to

<button onclick="this.nextElementSibling.showModal()">Test</button>

<dialog style="padding: 0" onclick="event.target==this && this.close()">
  <form style="margin: 0; padding: 1rem" method="dialog">
    <p>Clicking the white area doesn't close the dialog</p>
    <button>Click here</button>
  </form>
</dialog>

Answer 5

I figured out a very simple solution to this problem. Add a div container inside the <dialog>. Then check if that is the parent of the whole thing. If not, it's the dialog itself and it can be closed.

HTML

<dialog id="favDialog">
  <div class="test">
  Hello
  </div>
</dialog>

JS

document.querySelector('dialog').addEventListener('click', function(e) {
  if(!e.target.closest('div')) {
    e.target.close();
  }
});

Answer 6

I can't believe no-one mention directly comparing if the clicked element is the same as the dialog, using event.currentTarget:

document.querySelector('dialog').addEventListener('click', event => {
    if (event.target === event.currentTarget) {
        event.currentTarget.close()
    }
})

No calculations, no dialog variables. Just use the event. It has all the information we need...

Works the same for multiple dialogs:

document.querySelectorAll('dialog').forEach(element => 
    element.addEventListener('click', 
        event => (event.target === event.currentTarget) && event.currentTarget.close()
    )
)

To avoid a click inside the dialog from also registering, the dialog{border:0; padding:0;} CSS that every sensible answer mentions should also be set.

Answer 7

For anyone stumbling upon this question and wants to follow the solution recommended by @meaku , here's how I solved it to use a to encapsulate the element and not work with getBoundingClientRect() calculation:

const popup = document.getElementById('popup');
const popupDialog = document.getElementById('popup-dialog');
popup.addEventListener('click', function(e){
  console.info(e.target.tagName);
  if (e.target.tagName === 'DIALOG') popupDialog.close()
});

<div id="popup" style="padding: 0">
    <dialog id="popup-dialog" style="display:none;">
        <h4>Dialog Title</h4>
        <footer class="modal-footer">
            <button id="popup-close" type="button">close</button>
            <button id="popup-ok" type="button">ok</button>
        </footer>
    </dialog>
</div>

Answer 8

If you use click it will close the dialog even if you drag from inside to outside the dialog, which can be annoying.

You can use pointerdown and pointerup to detect outside clicks more accurately.

// Close a dialog when the user clicks outside of it
// Not using click because form submit can trigger click on submit button,
// and also it would close if you drag from within the dialog to the outside
// (e.g. if you're selecting text, or perhaps you start clicking the close button and reconsider)
function clickOutsideToClose(dialog) {
    function isOutsideDialog(event) {
        const rect = dialog.getBoundingClientRect();
        return (
            event.clientX < rect.left ||
            event.clientX > rect.right ||
            event.clientY < rect.top ||
            event.clientY > rect.bottom
        );
    }
    addEventListener("pointerdown", function (event) {
        if (event.target !== dialog) {
            return;
        }
        if (isOutsideDialog(event)) {
            addEventListener("pointerup", function (event) {
                if (isOutsideDialog(event)) {
                    closeSettings();
                }
            }, { once: true });
        }
    });
}

I haven't tried the div content wrapper method so far. Maybe that also solves this problem, or can be made to solve it?

Answer 9

An even simpler version would be:

dialog.addEventListener('click', (ev) => {
    if (ev.offsetX < 0 || ev.offsetX > ev.target.offsetWidth ||
        ev.offsetY < 0 || ev.offsetY > ev.target.offsetHeight) {
            dialog.close();
    }
});

Answer 10

The following solution is rather simple and does not need any additional html structure:

const dialog = document.getElementById("myDialogId");
dialog.addEventListener("click", (event) => {
  if (event.target.nodeName === "DIALOG") {
    dialog.close();
  }
});

Found on Stefan Judis' blog

Answer 11

A simplified version of @Seralo answer would be:

dialog.addEventListener("click", event => {
    const rect = dialog.getBoundingClientRect();
    if (event.clientY < rect.top || event.clientY > rect.bottom ||
        event.clientX < rect.left || event.clientX > rect.right) {
        dialog.close();
    }
};