MyAlerts. Nie wyskakuje okienko Modal. Trzeba użyć PPM

Witajcie, posiadam MyAlerts v2.0.4 for MyBB by Euan T, Pluginy 1.8.x i działa ale tylko trochę. Mianowicie kiedy mamy alert i klikamy w dzwoneczek to powinien wyskoczyć modal u mnie nie wyskakuje, pomaga tylko prawy myszy otwórz w nowym oknie

link: postawserwer.pl/forum

login: tester

hasło test123

załączam również sposób dodanie do szablonu dzwoneczka

dzieje się tak na szablonie podstawowym jak i również od szablonetu

<header>
	<div class="top clearfix">
		<div class="wrapper">
			<div class="left clearfix">
				<div class="logo">
					<a href="{$mybb->settings['bburl']}/index.php">
						<img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" />
					</a>
				</div>
				<ul class="menu">
					<li class="home">
						<a href="{$mybb->settings['bburl']}/index.php">
							<i class="fa fa-home" aria-hidden="true"></i>
						</a>
					</li>
					<li class="users">
						<a href="{$mybb->settings['bburl']}/memberlist.php">
							<i class="fa fa-users" aria-hidden="true"></i>
						</a>
					</li>
					<li class="shop">
						<a href="#">
							<i class="fa fa-shopping-basket" aria-hidden="true"></i>
						</a>
					</li>
					<li class="bans">
						<a href="#">
							<i class="fa fa-ban" aria-hidden="true"></i>
						</a>
					</li>
					<li class="contact">
						<a href="{$mybb->settings['bburl']}/contact.php">
							<i class="fa fa-envelope" aria-hidden="true"></i>
						</a>
					</li>
					<li class="alerts {$newAlertsIndicator}">
    <a href="{$mybb->settings['bburl']}/alerts.php" class="myalerts" onclick="MyBB.popupWindow('/alerts.php?modal=1&amp;ret_link={$myalerts_return_link}', { fadeDuration: 250, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;">
       <i class="fa fa-bell" aria-hidden="true"></i> ({$mybb->user['unreadAlerts']})</a>
</li>
					
					
				</ul>
			</div>
			<div class="control-panel">
				<nav>
					<ul class="user-panel">
						{$welcomeblock}
					</ul>
				</nav>
			</div>
		</div>
	</div>
	<div class="wrapper">
		<div class="menu-container">
			<div class="middle">
				<nav class="clearfix">
					<navigation>
					<ul class="user2">
						<li class="read-all"><a href="#" id="markall">{$lang->mark_all}</a></li>
						<li class="new-content">
							<a href="{$mybb->settings['bburl']}/search.php?action=getnew&showresults=threads">{$lang->new_content}</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>
	</div>
	<div class="slider">
		<div class="slides">
			<div>
				<h1 class="title">Welcome to our community</h1>
				<h2 class="description">We are glad if you like our new slider, this is only an example</h2>
				<div class="button">
					<a href="#">MORE</a>
				</div>
			</div>
			<div>
				<h1 class="title">Jak dodać slajd?</h1>
				<h2 class="description">Aby dodać slajd należy przejść do panelu admina i ustawić wszystko w szablonach nagłówku.</h2>
			</div>
		</div>
		<div class="pages"></div>
	</div>
</header>
	<main>
		<div class="wrapper">

Zobacz czy okienko nie wyskakuje na dole strony.

W global.css treść pomiędzy: /** Modal Start **/ i /** Modal End **/ zastąp tym:

 

.blocker {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
z-index: 9999;
padding: 20px;
box-sizing: border-box;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.75);
text-align: center;
background: rgba(0,0,0,0.7);
}

.blocker:before{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.05em;
}

.blocker.behind {
background-color: transparent;
}

.modal {
width: 400px;
text-align: left;
background: #fff;
display: inline-block;
vertical-align: middle;
top: 50%;
left: 50%;
z-index: 2;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-o-box-shadow: 0 0 10px #000;
-ms-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
position: fixed;
transform: translateX(-50%) translateY(-50%);
}

.modal a.close-modal {
position: absolute;
top: -12.5px;
right: -12.5px;
display: block;
width: 30px;
height: 30px;
text-indent: -9999px;
background: url(images/close.png) no-repeat 0 0;
}

.modal-spinner {
display: none;
width: 64px;
height: 64px;
position: fixed;
top: 50%;
left: 50%;
margin-right: -32px;
margin-top: -32px;
background: url(images/spinner_big.gif) no-repeat center center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
}

@Berst ale okienko pokazuję się na dole czy nie pokazuje się wcale?

Nic nie pomogło

działa wspaniale  dziękuję