[TUTORIAL] Modal de Mensagem Privada
Página 1 de 1 • Compartilhe
[TUTORIAL] Modal de Mensagem Privada
Envio de Mensagens Privadas |
Neste tutorial você aprenderá a inserir um modal, ou pop-up, que é exibida ao clicar no ícone de mensagem privada abaixo do perfil do usuário nos tópicos, facilitando e acelerando o envio de mensagens entre membros.
-->Tutoriais, dicas e astúcias <--
Modal de Mensagem Privada
Modal de Mensagem Privada
1º - Páginas .JS:
Para aplicarmos o tutorial, deveremos aceder à:
Painel de Controle ->> Módulos ->> HTML & JAVASCRIPT ->> Gestão dos códigos JavaScript
Título Correspondente ao nome da página JavaScript/jQuery que será criada. |
Localização São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos nos tópicos. |
Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente. |
Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum. |
2º - Código a ser usado:
Cole este novo código correspondente a sua versão:
phpBB3 |
- Código:
/**
* Modal de Mensagem Privada
* Versão: PHPBB3
* Autor: Kyo Panda
* Site: ajuda.forumeiros.com
*/
#pm-backdrop {
content: " ";
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
z-index: 5;
}
#pm-modal {
display: none;
position: fixed;
z-index: 10;
top: 100px;
left: 50%;
width: 500px;
margin-left: -250px;
box-sizing: border-box;
}
#pm-backdrop.open,
#pm-modal.open {
display: block;
}
#pm-title {
padding: 6px 5px 8px;
display: block;
text-transform: uppercase;
}
#pm-modal > form {
background-color: #ecf3f7;
}
#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;
border-top: 1px #fff solid;
}
#pm-modal .pm-buttons .button1,
#pm-modal .pm-buttons .button2 {
margin: 0 5px;
}
- Código:
/**
* Modal de Mensagem Privada
* Versão: PHPBB3
* Autor: Kyo Panda
* Site: ajuda.forumeiros.com
*/
$(function() {
var lang;
lang = {
subject: 'Assunto:',
message: 'Mensagem:',
submit: 'Enviar',
preview: 'Pré-visualizar',
or: 'ou',
cancel: 'Cancelar'
};
$('<div>').html(
'<div id="pm-modal" class="forabg">' +
'<span class="corners-top">' +
'<span></span>' +
'</span>' +
'<a href="javascript:void(0)" class="close">✕</a>' +
'<div id="pm-title" class="table-title"></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 submit-buttons">' +
'<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 + '" class="button1" />' +
'<input name="preview" type="submit" value="' + lang.preview + '" class="button2" />' +
'<span> ' + lang.or + ' </span>' +
'<a href="javascript:void(0)" class="close">' + lang.cancel + '</a>' +
'</fieldset>' +
'</form>' +
'<span class="corners-bottom">' +
'<span></span>' +
'</span>' +
'</div>' +
'<div id="pm-backdrop"></div>'
).appendTo('body');
$('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('Enviando MP para ' + 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');
});
});
phpBB2 |
- Código:
/**
* Modal de Mensagem Privada
* Versão: PHPBB2
* Autor: Kyo Panda
* Site: ajuda.forumeiros.com
*/
#pm-backdrop {
content: " ";
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
z-index: 5;
}
#pm-modal {
display: none;
position: fixed;
top: 100px;
left: 50%;
width: 500px;
margin-left: -250px;
box-sizing: border-box;
z-index: 10;
}
#pm-modal > table {
width: 100%;
}
#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;
}
- Código:
/**
* Modal de Mensagem Privada
* Versão: PHPBB2
* Autor: Kyo Panda
* Site: ajuda.forumeiros.com
*/
$(function() {
var lang;
lang = {
subject: 'Assunto:',
message: 'Mensagem:',
submit: 'Enviar',
preview: 'Pré-visualizar',
or: 'ou',
cancel: 'Cancelar'
};
$('<div>').html(
'<form id="pm-modal" action="/privmsg" method="post" name="post" enctype="multipart/form-data">' +
'<a href="javascript:void(0)" class="close">✕</a>' +
'<table class="forumline">' +
'<tr>' +
'<th id="pm-title" colspan="2"></th>' +
'</tr>' +
'<tr>' +
'<td class="row1"><label for="pm-subject" class="gen">' + lang.subject + '</label></td>' +
'<td class="row2"><input id="pm-subject" name="subject" class="post" type="text" /></td>' +
'</tr>' +
'<tr>' +
'<td class="row1"><label for="pm-message" class="gen">' + lang.message + '</label></td>' +
'<td class="row2"><textarea id="pm-message" name="message" class="post" type="text" rows="7" cols="40"></textarea></td>' +
'</tr>' +
'<tr>' +
'<td colspan="2" class="catBottom" align="center">' +
'<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 + '" class="mainoption" />' +
'<input name="preview" type="submit" value="' + lang.preview + '" class="liteoption" />' +
'<span> ' + lang.or + ' </span>' +
'<a href="javascript:void(0)" class="close">' + lang.cancel + '</a>' +
'</td>' +
'</tr>' +
'</table>' +
'</form>' +
'<div id="pm-backdrop"></div>'
).appendTo('body');
$('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('Enviando MP para ' + 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');
});
});
PunBB |
- Código:
/**
* Modal de Mensagem Privada
* Versão: PunBB
* Autor: Kyo Panda
* Site: ajuda.forumeiros.com
*/
#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;
}
- Código:
/**
* Modal de Mensagem Privada
* Versão: PunBB
* Autor: Kyo Panda
* Site: ajuda.forumeiros.com
*/
$(function() {
var lang;
lang = {
subject: 'Assunto:',
message: 'Mensagem:',
submit: 'Enviar',
preview: 'Pré-visualizar',
or: 'ou',
cancel: 'Cancelar'
};
$('<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('Enviando MP para ' + 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');
});
});
Invision |
- Código:
/**
* Modal de Mensagem Privada
* Versão: Invision
* Autor: Kyo Panda
* Site: ajuda.forumeiros.com
*/
#pm-backdrop {
content: " ";
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
z-index: 5;
}
#pm-modal {
display: none;
position: fixed;
z-index: 10;
top: 100px;
left: 50%;
width: 500px;
margin-left: -250px;
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-buttons .button {
margin: 0 5px;
}
- Código:
/**
* Modal de Mensagem Privada
* Versão: Invision
* Autor: Kyo Panda
* Site: ajuda.forumeiros.com
*/
$(function() {
var lang;
lang = {
subject: 'Assunto:',
message: 'Mensagem:',
submit: 'Enviar',
preview: 'Pré-visualizar',
or: 'ou',
cancel: 'Cancelar'
};
$('<div>').html(
'<div id="pm-modal" class="borderwrap">' +
'<a href="javascript:void(0)" class="close">✕</a>' +
'<div id="pm-title" class="maintitle floated clearfix"></div>' +
'<form action="/privmsg" method="post" name="post" enctype="multipart/form-data" class="ipbform2 columned">' +
'<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 formbuttonrow center">' +
'<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 + '" class="button" />' +
'<input name="preview" type="submit" value="' + lang.preview + '" class="button" />' +
'<span> ' + lang.or + ' </span>' +
'<a href="javascript:void(0)" class="close">' + lang.cancel + '</a>' +
'</fieldset>' +
'</form>' +
'</div>' +
'<div id="pm-backdrop"></div>'
).appendTo('body');
$('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('Enviando MP para ' + 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');
});
});
- Onde posso adicionar o CSS?
O CSS poderá ser adicionado em Painel de Controle > Visualização > Imagens e Cores > Cores > Folha de estilo CSS >. - Resultado:
PhpBB2: https://i.servimg.com/u/f57/18/81/53/06/phpbb210.png
PunBB: https://i.servimg.com/u/f57/18/81/53/06/punbb10.png
Invision: https://i.servimg.com/u/f57/18/81/53/06/invisi11.png
© Fórum dos Fóruns & Kyo Panda
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Modal de Mensagem Privada |
Tópicos semelhantes
» [TUTORIAL] Mensagem privada ao se postar no perfil
» Mensagem privada
» Mensagem privada em pop-up
» Mensagem privada
» Pop up na mensagem privada
» Mensagem privada
» Mensagem privada em pop-up
» Mensagem privada
» Pop up na mensagem privada
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos