[Javascript] Gửi tin nhắn riêng nhanh

Demo:

Hướng dẫn:

1. Tạo 1 trang javascript mới (ACP >> Modules >> HTML & JAVASCRIPT >> Javascript codes management >> Creat a new javascript)

Code:

  $(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. Cho vào CSS:

Code:

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