Page 1 of 1

Can I make popup Modals, per Div?

Posted: Thu May 18, 2017 6:11 am
by simonmlewis
https://www.w3schools.com/howto/howto_css_modals.asp
Found this, and is really smart. Responsive too. Trouble is, it seems to only work for one modal pop up per page.

Can it be adapted to do multiple?

Re: Can I make popup Modals, per Div?

Posted: Thu May 18, 2017 8:39 am
by requinix
Multiple how? The simplest tactic would be to make the modal be a container, then show and hide the elements within as needed.

As in

Code: Select all

<div id="modal">
	<div id="modal1">Modal 1</div>
	<div id="modal2">Modal 2</div>
</div>

Code: Select all

var $modal = $("#modal");
function showmodal(child) {
	$modal.children().hide();
	$modal.children(child).show();
	$modal.show();
}

function hidemodal() {
	$modal.hide();
}

Code: Select all

showmodal("#modal2");
Multiple actual modal dialogs is also possible, of course. Basically you use classes instead of IDs for the CSS, show one modal by hiding the others (by class) and showing the one you want (by ID), hide the modal by simply hiding all of them; hiding all at once saves you having to track which is open.