[TUTORIAL] Modal de Mensagem Privada

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

[TUTORIAL] Modal de Mensagem Privada Empty [TUTORIAL] Modal de Mensagem Privada

Mensagem por BrunoH. em 13.07.14 17:22


[TUTORIAL] Modal de Mensagem Privada Newsletter

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
[TUTORIAL] Modal de Mensagem Privada Painel13

[TUTORIAL] Modal de Mensagem Privada 110111[TUTORIAL] Modal de Mensagem Privada 398853 Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Modal de Mensagem Privada 110210[TUTORIAL] Modal de Mensagem Privada 398853 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.
[TUTORIAL] Modal de Mensagem Privada 110310[TUTORIAL] Modal de Mensagem Privada 398853 Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente.
[TUTORIAL] Modal de Mensagem Privada 110410[TUTORIAL] Modal de Mensagem Privada 398853 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:
[TUTORIAL] Modal de Mensagem Privada Logo 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');
    });
});

[TUTORIAL] Modal de Mensagem Privada Logo 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');
    });
});

[TUTORIAL] Modal de Mensagem Privada Logo 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');
    });
});

[TUTORIAL] Modal de Mensagem Privada Logo 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


[TUTORIAL] Modal de Mensagem Privada Act_bottom 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
BrunoH.

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