https://motforum.com/phpbb/styles/quarto_asphalt/template/quarto_login_popup.js?assets_version=3973

1$(document).ready(function() {	
2
3	//select all the a tag with name equal to modal
4	$('a.login-window').click(function(e) {
5		//Cancel the link behavior
6		e.preventDefault();
7		
8		//Get the A tag
9		var id = $(this).attr('href');
10	
11		//Get the screen height and width
12		var maskHeight = $(document).height();
13		var maskWidth = $(window).width();
14	
15		//Set heigth and width to mask to fill up the whole screen
16		$('#mask').css({'width':maskWidth,'height':maskHeight});
17		
18		//transition effect		
19		$('#mask').fadeIn(500);	
20	
21		//Get the window height and width
22		var winH = $(window).height();
23		var winW = $(window).width();
24              
25		//Set the popup window to center
26		$(id).css('top',  winH/2-$(id).height()/2);
27		$(id).css('left', winW/2-$(id).width()/2);
28	
29		//transition effect
30		$(id).fadeIn(500); 
31	
32	});
33	
34	//if close button is clicked
35	$('.login-popup .close').click(function (e) {
36		//Cancel the link behavior
37		e.preventDefault();
38		
39		$('#mask').fadeOut(500);
40		$('.login-popup').fadeOut(500);
41	});		
42	
43	//if mask is clicked
44	$('#mask').click(function () {
45		$(this).fadeOut(500);
46		$('.login-popup').fadeOut(500);
47	});			
48
49	$(window).resize(function () {
50	 
51 		var box = $('.login-popup');
52 
53        //Get the screen height and width
54        var maskHeight = $(document).height();
55        var maskWidth = $(window).width();
56      
57        //Set height and width to mask to fill up the whole screen
58        $('#mask').css({'width':maskWidth,'height':maskHeight});
59               
60        //Get the window height and width
61        var winH = $(window).height();
62        var winW = $(window).width();
63
64        //Set the popup window to center
65        box.css('top',  winH/2 - box.height()/2);
66        box.css('left', winW/2 - box.width()/2);
67	 
68	});
69	
70});