[Javascript] Send fast PMs (Popup)

Tutorial: Send fast PMs (Popup)

With this tutorial when you open the profile of the member, click contact and PM icon you'll get a fast popup window to send a private message quickly.

Credit: @KyoPanda

--> Tutorials, tips and tricks <--
Send fast PMs (Popup)

1º - Javascript
Placement In all pages

Code:

[panda=js]  $(function() {
   
        var lang;
     
        lang = {
            subject: 'Subject:',
            message: 'Message:',
            submit: 'Submit',
            preview: 'Preview',
            or: 'or',
            cancel: 'Cancel'
        };
   
        $('<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('Send Private Message ' + 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');
        });
    });

2º - CSS

Code:

[panda=css] #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;
    }

3º - Preview

---

© PunBB Design

If you have any questions related to this topic create a topic with the following title: Send fast PMs (Popup)

thanks

this code not work because it not automatic choose member that want to send the message?

would you lpease Explane more how its work
i think its not working on my forum
no popup or any thing

[link="/t623-javascript-send-fast-pms-popup#4148"]would you lpease Explane more how its work
i think its not working on my forum
no popup or any thing

Open a profile to which member you want to send a PM, click contact tab and then click on the PM icon.

This does not work.

its nice but cant u make that it take automatic hes username to??

[infos="Questions and Problems"]Hello,

You have to create a new topic to Questions & Problems referring to this post. That way other members with the same question will find the answers easier in the correct category.[/infos]