2014-04-19, 14:53
Tutorial: Private message - Popup box |
So, basically this will provide to the users nice styled popup box for new private messages.
--> Tutorials, tips and tricks <--
Private message - Popup box
Private message - Popup box
1º - Template
APC > Display > Templates > Display > overall_header
Find:
- Code:
[panda=html] <!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
if(pm != null) { pm.focus(); }
<!-- END switch_enable_pm_popup -->
Replace with:
- Code:
[panda=html] <!-- BEGIN switch_enable_pm_popup -->
pm = $('body').prepend('
<div id="kinboxpop">
<div id="knmessagepop" style="z-index:999;">
<h3><span class="username">' + _userdata.username + '</span> you have a new message!</h3>
<span id="contentmess">Check your inbox to see new message.<br /><br />
<a href="/privmsg?folder=inbox">Click here</a></span>
</div>
</div>');
$('#close_popup').on('click',function() {
$('#kinboxpop').remove();
});
<!-- END switch_enable_pm_popup -->
2º - CSS
- Code:
[panda=css] #kinboxpop{background:rgba(0,0,0,0.75);position:fixed;height:100%;width:100%;top:0;left:0;}
#kinboxpop{background:rgba(0,0,0,0.75);position:fixed;height:100%;width:100%;top:0;left:0;}
#kinboxpop #knmessagepop{background:#fff;border:1px solid #999;height:auto;margin:25% auto;overflow:hidden;width:500px;}
#kinboxpop #knmessagepop h3{position:relative;text-align:center;background:#333;border-bottom:1px solid #222;color:#fff;margin:0;font-weight:bold;padding:5px 0;}
#kinboxpop #closepop{cursor:pointer;position:absolute;right:0;top:0;}
#kinboxpop #contentmess{float:left;text-align:center;width:100%;padding:15px 0;}
3º - Preview
© PunBB Design
If you have any questions related to this topic create a topic with the following title: Private message - Popup box |