JS: Confirm Click with Custom PopUp Message

This is a slick little jquery bit that gives you a browser popup to confirm your click. Used on modules or in templates.

Includes a way to customize the message.

HTML

First, here's a basic link with a simple default "are you sure?" confirmation message:

<a class="confirmclick" href="something.html">Delete Everything!</a>

This will bring up "Are you sure?"

This link has a custom popup message:

<a class="confirmclick" data-msg="The frogs will be unhappy." href="something.html">Delete all lilly pads</a>

Vanilla JS

The js to handle this is short and simple. It either takes the message you put in data-msg or it defaults to "Are you sure?"

<script>
document.addEventListener('click', function (e) {
	var el = e.target.closest('.confirmclick');
	if (!el) return;
	var msg = el.dataset.msg || 'Are you sure?';
	if (!confirm(msg)) {
		e.preventDefault();
	}
});
</script>