[TUTORIAL] Modal de Mensagem Privada

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

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

CSS:

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;
}

JavaScript:

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

CSS:

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;
}

JavaScript:

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

CSS:

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;
}

JavaScript:

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

CSS:

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;
}

JavaScript:

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