Can I make popup Modals, per Div?

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Can I make popup Modals, per Div?

Post 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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Can I make popup Modals, per Div?

Post 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.
Post Reply