Mod: Adding Close button to GK Popups.
Example Template: esport
Quick mod to add close buttons on popups. As popup code is generic in all latest templates so it should work fine with other templates, look for similar codes. esport template has an extra "cart" popup so example supports cart popup too, if your template does not have store functionality simply do not include cart in below modifications.
4 Stages : Html Code / Css / Javascript / Image for close button.
Adding Html:
Find File: templates/gk_esport/layouts/default.php
Find Lines: 273 to 294 which is below
- Code: Select all
<?php if(GK_LOGIN && !GK_COM_USERS) : ?>
<div id="gkPopupLogin">
<div class="gkPopupWrap">
<?php $this->loadBlock('tools/login'); ?>
</div>
</div>
<?php endif; ?>
<?php if(GK_REGISTER && !GK_COM_USERS) : ?>
<div id="gkPopupRegister">
<div class="gkPopupWrap">
<?php $this->loadBlock('tools/register'); ?>
</div>
</div>
<?php endif; ?>
<?php if($this->modules('cart')) : ?>
<div id="gkPopupCart">
<div class="gkPopupWrap">
<?php $this->loadBlock('tools/cart'); ?>
</div>
</div>
Replace with below
- Code: Select all
<?php if(GK_LOGIN && !GK_COM_USERS) : ?>
<div id="gkPopupLogin">
<div class="gkPopupWrap">
<div class="gkPopupClose">Close</div>
<?php $this->loadBlock('tools/login'); ?>
</div>
</div>
<?php endif; ?>
<?php if(GK_REGISTER && !GK_COM_USERS) : ?>
<div id="gkPopupRegister">
<div class="gkPopupWrap">
<div class="gkPopupClose">Close</div>
<?php $this->loadBlock('tools/register'); ?>
</div>
</div>
<?php endif; ?>
<?php if($this->modules('cart')) : ?>
<div id="gkPopupCart">
<div class="gkPopupWrap">
<div class="gkPopupClose">Close</div>
<?php $this->loadBlock('tools/cart'); ?>
</div>
</div>
CSS:
Add below css in to override.css or gk.stuff.css located in /css folder. Make sure enable css override from template settings > advanced settings if you are using override.css
- Code: Select all
#gkPopupLogin .gkPopupClose,#gkPopupRegister .gkPopupClose, #gkPopupCart .gkPopupClose {background:url("../images/popup_close.png") no-repeat scroll transparent;cursor:pointer;float:right;height:24px;margin:3px 0 0;position:relative;text-indent:-999em;top:-30px;right:-25px;width:24px;}
Javascript:
Find File: templates/gk_esport/js/gk.scripts.js
Find Lines: 181 to 197 which is below
- Code: Select all
if(opened_popup == 'register') {
popup_overlay.fade('out');
popup_register_fx.start({
'opacity' : 0,
'height' : 0
});
}
if(opened_popup == 'cart') {
popup_overlay.fade('out');
popup_cart_fx.start({
'opacity' : 0,
'height' : 0
});
}
});
}
Replace with below
- Code: Select all
if(opened_popup == 'register') {
popup_overlay.fade('out');
popup_register_fx.start({
'opacity' : 0,
'height' : 0
});
}
if(opened_popup == 'cart') {
popup_overlay.fade('out');
popup_cart_fx.start({
'opacity' : 0,
'height' : 0
});
}
});
}
if(document.id('gkPopupLogin') && document.id('gkPopupLogin').getElement('.gkPopupClose')) {
document.id('gkPopupLogin').getElement('.gkPopupClose').addEvent("click", function(){
popup_overlay.fade('out');
popup_login_fx.start({
'opacity' : 0,
'height' : 0
});
});
}
if(document.id('gkPopupRegister') && document.id('gkPopupRegister').getElement('.gkPopupClose')) {
document.id('gkPopupRegister').getElement('.gkPopupClose').addEvent("click", function(){
popup_overlay.fade('out');
popup_register_fx.start({
'opacity' : 0,
'height' : 0
});
});
}
if(document.id('gkPopupCart') && document.id('gkPopupCart').getElement('.gkPopupClose')) {
document.id('gkPopupCart').getElement('.gkPopupClose').addEvent("click", function(){
popup_overlay.fade('out');
popup_cart_fx.start({
'opacity' : 0,
'height' : 0
});
});
}
Image:
Find attached zip file, extract it and copy image file to "templates/gk_esport/images/popup_close.png"
Test:
Open pupup and click on "X" to close it.
See you around...
But maby someone find it usefull.
I wasn't able to help because my lack in knowledge of mootools, so it's a pretty big release that You've helped with it 
