2014-08-30, 14:05
Tutorial: Send fast PMs (Popup) |
With this tutorial when you open the profile of the member, click contact and PM icon you'll get a fast popup window to send a private message quickly.
Credit: @KyoPanda
--> Tutorials, tips and tricks <--
Send fast PMs (Popup)
Send fast PMs (Popup)
1º - Javascript
Placement In all pages
- Code:
[panda=js] $(function() {
var lang;
lang = {
subject: 'Subject:',
message: 'Message:',
submit: 'Submit',
preview: 'Preview',
or: 'or',
cancel: 'Cancel'
};
$('<div>').html(
'<div id="pm-modal" class="main main-content frm">' +
'<a href="javascript:void(0)" class="close">✕</a>' +
'<div class="main-head">' +
'<div id="pm-title" class="page-title"></div>' +
'</div>' +
'<form action="/privmsg" method="post" name="post" enctype="multipart/form-data">' +
'<fieldset class="pm-body">' +
'<dl class="pm-row">' +
'<dt><label for="pm-subject">' + lang.subject + '</label></dt>' +
'<dd><input id="pm-subject" name="subject" class="inputbox" type="text" /></dd>' +
'</dl>' +
'<dl class="pm-row">' +
'<dt><label for="pm-message">' + lang.message + '</label></dt>' +
'<dd><textarea id="pm-message" name="message" class="inputbox"></textarea></dd>' +
'</dl>' +
'</fieldset>' +
'<fieldset class="pm-buttons frm-set">' +
'<dl class="frm-buttons">' +
'<dt> </dt>' +
'<dd>' +
'<input id="pm-username" name="username[]" type="hidden" />' +
'<input name="folder" type="hidden" value="inbox" />' +
'<input name="mode" type="hidden" value="post" />' +
'<input name="new_pm_time" type="hidden" value="' + new Date().getTime() + '" />' +
'<input name="lt" type="hidden" />' +
'<input name="post" type="submit" value="' + lang.submit + '" />' +
'<input name="preview" type="submit" value="' + lang.preview + '" />' +
'<span> ' + lang.or + ' </span>' +
'<a href="javascript:void(0)" class="close">' + lang.cancel + '</a>' +
'</dd>' +
'</dl>' +
'</fieldset>' +
'</form>' +
'<span class="corners-bottom">' +
'<span></span>' +
'</span>' +
'</div>' +
'<div id="pm-backdrop"></div>'
).appendTo('.pun');
$('a[href^="/privmsg?mode=post"]').on('click', function() {
var self, username, uid;
self = $(this);
uid = self.attr('href').split('&u=').pop();
username = $.trim($('a[href="/u' + uid + '"] strong:last').text());
$('#pm-title').text('Send Private Message ' + username);
$('#pm-username').val(username);
$('#pm-modal, #pm-backdrop').addClass('open');
return false;
});
$('#pm-modal .close, #pm-backdrop').on('click', function() {
$('#pm-modal, #pm-backdrop').removeClass('open');
});
});
2º - CSS
- Code:
[panda=css] #pm-backdrop {
content: " ";
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
}
#pm-modal {
display: none;
position: fixed;
z-index: 1;
top: 100px;
left: 50%;
width: 500px;
margin-left: -250px;
background: #fff;
box-sizing: border-box;
}
#pm-backdrop.open,
#pm-modal.open {
display: block;
}
#pm-modal > .close {
position: absolute;
right: 20px;
top: 10px;
line-height: 14px;
font-size: 14px;
cursor: pointer;
text-decoration: none;
color: #fff;
}
#pm-modal .pm-body {
padding: 10px;
}
#pm-modal .pm-buttons {
margin: 0 !important;
padding: 10px 0;
}
#pm-modal dt {
width: 100px;
}
#pm-modal dd {
margin-left: 120px;
}
#pm-modal .pm-body {
margin: 0;
}
3º - Preview
© PunBB Design
If you have any questions related to this topic create a topic with the following title: Send fast PMs (Popup) |