I was able to search many Popups →
but could not find something that can be a replica of this(3 Popups boxes popping uptogether) →
Assuming that its just 3 divs and not 3 popups as the drawing is unclear then you could just animate the boxes into position with css.
Here’s a very basic jquery demo:
(view on codepen for full effect)
That should get you started:). I’ve kept it simple so you can easily adjust the positions and timings and directions of the elements as they flow together.
You would also need to add a media query for smaller screens and make the modal columns vertical so it fits better.
3 Likes
Nice. It is wow. 
It is a very optimal code. I mean Javascript/JQuery is too low.
Just this one:
$(document).on('click','.myBtn',function(){
var myTargetModal = $(this).attr('href');
$(myTargetModal).fadeToggle();
$('body').toggleClass('modal-open');
return false;
});
As far as I know, using a very minimal Javascript/JQuery is a good coding practice.
I used jquery because the example you linked to was jquery based but you can do it in vanilla js for modern browsers like this:
(Bear in mind my js is very basic)
2 Likes
Haha, just this morning I saw that jQuery UI post on hackernews and got a bit nostalgic… so here’s a solution using separately closable and draggable dialog widgets. :-P It does use CSS transitions for better performance though, and flexbox for a responsive arrangement.
No seriously, better use @PaulOB’s clean solution instead of this hacky UX nightmare! :-D As you see, the JS can be kept to a minimum of 5 LOC here…
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.