Alerta de MP em efeito LightBox (Não está funcionando)

Detalhes da questão

Endereço do fórum: http://gsf-nwd.forumeiros.com/forum
Versão do fórum: phpBB3

Descrição

Eu segui esse tutorial aqui > CLIQUE <, porém não obtive nenhum resultado. Fiz tudo certinho, mas não está funcionando.

Eu fiz um novo JavaScript um pouco mais moderno.
O efeito será este:
-> http://prntscr.com/iya2f6

Para usá-lo, crie um novo JS investido em todas as páginas com o código:

Código:

/*globals jQuery*/

/**
 * Criar um popup de alerta (Mensagens Privadas).
 *
 * @author  Luiz Felipe F.
 * @see      https://lffg.github.io
 * @version  1.0.0
 * @license  MIT
 */

(function($) {
  'use strict';

  $(function() {
    var $selector = $('.mainmenu .new-message');

    if (! $selector.length) return;

    $([
      '<div class="fa-privmsg-notify">',
      '  <a href="#" class="close-button">×</a>',
      '  <header>',
      '    <img src="https://i.imgur.com/gyzNDAn.png" alt="" />',
      '  </header>',
      '  <main>',
      '    <span>Você tem uma nova mensagem privada!</span>',
      '  </main>',
      '  <footer>',
      '    <span>',
      '      Clique <a href="/privmsg?folder=inbox">aqui</a> para ver a lista de mensagens privadas.',
      '    </span>',
      '  </footer>',
      '</div>'
    ].join('\n'))
      .appendTo('body')
      .find('.close-button').on('click', function() {
        $(this).parent().fadeOut();
      });

    $('<style>', { 'text': [
      '.fa-privmsg-notify {',
      '  position: fixed;',
      '  top: 50%;',
      '  left: 50%;',
      '  transform: translate(-50%, -50%);',
      '  z-index: 998;',
      '  background-color: #fff;',
      '  text-align: center;',
      '  padding: 20px;',
      '  border: solid 2px #333333;',
      '  border-radius: 4px;',
      '  box-shadow: 4px 4px rgba(0, 0, 0, 0.3);',
      '}',
      '',
      '.fa-privmsg-notify > .close-button {',
      '  position: absolute;',
      '  top: -1px;',
      '  right: -1px;',
      '  background-color: #333;',
      '  color: #fff;',
      '  width: 25px;',
      '  height: 25px;',
      '  font-size: 13px;',
      '  text-align: center;',
      '  line-height: 25px;',
      '  border: solid 1px #333;',
      '  border-bottom-left-radius: 4px;',
      '}',
      '',
      '.fa-privmsg-notify > .close-button:hover {',
      '  background-color: #464646;',
      '}',
      '',
      '.fa-privmsg-notify header > img {',
      '  width: 100px;',
      '  height: 100px;',
      '  margin-bottom: 15px;',
      '}',
      '',
      '.fa-privmsg-notify > main,',
      '.fa-privmsg-notify > footer {',
      '  font-size: 17px;',
      '  line-height: 1.6;',
      '  font-weight: 300;',
      '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;',
      '}'
    ].join('\n') }).appendTo('head');
  });
})(jQuery);

o/

Ainda não funcionou :/

Eu criei uma nova JS do jeito que você falou e não resultou em nada.

- Via MP eu lhe mandei uma conta com login e senha para que você possa testar caso for preciso.

O script é perfeitamente funcional.

O problema é que essa sequência de caracteres indevidos (provavelmente colocados sem querer pelo senhor ou por um outro administrador) estão criando um erro, o que impede o funcionamento do script:
-> http://prntscr.com/iyav5t

Creio que estejam no JS de ID 99335.
Queira checar.

Caso não encontrar, acesse JavaScript por JavaScript filtrando o termo:

Código:

afadada.

Quando encontrá-lo, remova.

Após isso, tudo deverá ficar certo.

o/

Tenho 16 JS e o id do JS da MP é 15110. E eu não encontrei esse tal de "afadada" não, confesso que dei até risada quando li.
Essa suposta palavra foi encontra no Script que você me passou? Porque como eu disse, não encontrei ele.

Como você pode verificar na imagem que enviei acima:

Luiz escreveu:http://prntscr.com/iya2f6

Sim, está.

Uma imagem mais abrangente:
-> http://prntscr.com/iyb1f8

Está aí.

Olá, eu conseguir encontrar o erro. Estava em outro JS (que loucura ). Testei e funcionou..

Porém não teria como deixar com esse fundo preto > < até mesmo para destacar a caixa branca que aparece...

Adicione em sua Folha de Estilos:

Código:

.mainmenu .new-message::after {
  content: "";
  position: fixed;
  top: -100vh;
  left: -100vh;
  width: 300vh;
  height: 300vh;
  z-index: 997;
  background-color: rgba(0, 0, 0, 0.7);
}

o/

Valeu mano, tudo resolvido.

Obrigado por tudo, principalmente pela atenção, é nós!