[TUTORIAL] Modal de Mensagem Privada

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Modal de Mensagem Privada

Mensagem por BrunoH. em 13/07/14, 01:22 pm



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




- 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.


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







© 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
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum