• Descrição:

Eu queria bota tipoo assim quando entra no perfil da pessoa Clicar em Enviar mensagem ai aparecia essa ABA



Lugar aonde eu vi isso Xtibia.com

• Informações:

Código:

/**
 * Modal MP
 * Versão: PHPBB3
 * Autor: Kyo Panda
 * Site: ajuda.forumeiros.com
 */

$(function() {

    $('<div>', {'id': 'pm-modal', 'class': 'forabg'}).append(
        $('<span>', {'class': 'corners-top'}).append(
            $('<span>')
        )
    ).append(
        $('<div>', {'id': 'pm-title', 'class': 'table-title'})
    ).append(
        $('<a>', {'class': 'close', 'text': '✕', 'href': 'javascript:void(0)'})
    ).append(
        $('<form>', {'action': '/privmsg', 'method': 'post', 'name': 'post', 'enctype': 'multipart/form-data'}).append(
            $('<fieldset>', {'class': 'pm-body'}).append(
                $('<dl>', {'class': 'pm-row'}).append(
                    $('<dt>').append(
                        $('<label>', {'for': 'pm-subject', 'text': 'Assunto'})
                    )
                ).append(
                    $('<dd>').append(
                        $('<input>', {'id': 'pm-subject', 'name': 'subject', 'class': 'inputbox'})
                    )
                )
            ).append(
                $('<dl>', {'class': 'pm-row'}).append(
                    $('<dt>').append(
                        $('<label>', {'for': 'pm-message', 'text': 'Mensagem'})
                    )
                ).append(
                    $('<dd>').append(
                        $('<textarea>', {'id': 'pm-message', 'name': 'message', 'class': 'inputbox'})
                    )
                )
            )
        ).append(
            $('<fieldset>', {'class': 'pm-buttons submit-buttons'}).append(
                $('<input>', {'id': 'pm-username', 'name': 'username[]', 'type': 'hidden'})
            ).append(
                $('<input>', {'name': 'folder', 'type': 'hidden', 'value': 'inbox'})
            ).append(
                $('<input>', {'name': 'mode', 'type': 'hidden', 'value': 'post'})
            ).append(
                $('<input>', {'name': 'new_pm_time', 'type': 'hidden', 'value': new Date().getTime()})
            ).append(
                $('<input>', {'name': 'lt', 'type': 'hidden'})
            ).append(
                $('<input>', {'name': 'post', 'type': 'submit', 'value': 'Enviar', 'class': 'button1'})
            ).append(
                $('<input>', {'name': 'preview', 'type': 'submit', 'value': 'Usar editor completo', 'class': 'button2'})
            ).append(
                $('<span>', {'text': ' ou '})
            ).append(
                $('<a>', {'href': 'javascript:void(0)', 'class': 'close', 'text': 'Cancelar'})
            )
        )
    ).append(
        $('<span>', {'class': 'corners-bottom'}).append(
            $('<span>')
        )
    ).appendTo('body');
    
    $('<div>', {'id': 'pm-backdrop'}).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');
    });
});

Código:

/**
 * Modal MP
 * 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);
}

#pm-modal {
  display: none;
  position: fixed;
  z-index: 1;
  top: 100px;
  left: 50%;
  width: 400px;
  margin-left: -200px;
  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:

#pm-modal {
  border: 5px #333 solid;
  width: 600px;
  margin-left: -300px;
}

#pm-modal .corners-top,
#pm-modal .corners-bottom {
  display: none;
}

#pm-title {
  background: #f6f6f6;
  background: -moz-linear-gradient(top, #f6f6f6 0%, #e5e5e5 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#e5e5e5));
  background: -webkit-linear-gradient(top, #f6f6f6 0%,#e5e5e5 100%);
  background: -o-linear-gradient(top, #f6f6f6 0%,#e5e5e5 100%);
  background: -ms-linear-gradient(top, #f6f6f6 0%,#e5e5e5 100%);
  background: linear-gradient(to bottom, #f6f6f6 0%,#e5e5e5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e5e5e5',GradientType=0 );
  color: #333;
  font-size: 14px;
  text-transform: none;
  padding: 10px;
  border-bottom: 1px #ccc solid;
}

#pm-modal form {
  background: #fff;
}

#pm-modal dd,
#pm-modal dt {
  display: block;
  float: none;
  width: auto;
  margin: 0;
}

#pm-modal dt {
  padding-bottom: 5px;
}

#pm-modal dt label {
  font-weight: normal;
}

#pm-modal .inputbox {
  padding: 7px 10px;
  box-shadow: inset 1px 1px 5px 0 rgba(0, 0, 0, 0.1);
}

#pm-modal input.inputbox {
  width: 50%;
}

#pm-modal textarea.inputbox {
  width: 70%;
  height: 120px;
  resize: none;
}

#pm-modal .pm-buttons {
  background: #f6f6f6;
  padding: 20px 0;
}

#pm-modal .pm-buttons .button1,
#pm-modal .pm-buttons .button2 {
  border: none;
  border-radius: 3px;
  background: #666;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
  padding: 7px 15px;
  font-weight: normal;
  box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.5), 1px 1px 2px 0 rgba(0, 0, 0, 0.2);
}

#pm-modal .pm-buttons .button1 {
  background: #1967AF;
}

#pm-modal .pm-buttons > a {
  color: #f00;
  font-weight: 700;
}