Como colocar uma mensagem em POP-UP

Detalhes da questão

Endereço do fórum: https://habbling.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Oi gente, eu aqui de novo hahahah

eu queria que quando o usuario acessasse o fórum, já viesse uma mensagem em POP UP alertando algo, é possivel?

Olá @weverson lopes,

Sim, isso é possível. Possuo um código aqui que funciona da seguinte maneira:

Você pode definir o conteúdo e o título do anúncio e ele aparecerá quando um usuário entrar no fórum, no entanto, quando ele clicar no botão "COMPREENDI" no final do anúncio, o pop up não aparecerá mais para ele, apenas quando ele deletar os cookies, trocar de dispositivo ou algo do gênero. Caso queira utilizar este código, crie um código Javascript com investimento em todas as páginas com o seguinte conteúdo:

Código:

(function($) { 'use strict'; var warn = { warn_code: 'Aviso - 07', title_warn: '<strong>Título do Anúncio</strong>', content: ['Conteúdo do anúncio.'].join('<br/>') };
    $(function() { var $warning = $(['<div class="sticky-back"></div>', '<div class="sticky-warn">', '  <div class="warn-content">', '    <div class="warn-title">' + warn.title_warn + '</div>', '    <div class="warn-text">' + warn.content + '</div>', '  </div>', '  <button class="warn-btn">COMPREENDI</button>', '</div>'].join('\n')); if (localStorage.getItem("warn_code") != warn.warn_code && _userdata.session_logged_in) { $warning.appendTo('body');
            localStorage.removeItem("warn_code");
            $('.warn-btn').hide();
            setTimeout(function() { $('.warn-btn').fadeIn(100) }, 5000) }
        $('.warn-btn').on('click', function() { localStorage.setItem("warn_code", warn.warn_code);
            $warning.hide() });
        $('<style>', { 'text': ['.sticky-back {', '  position: fixed;', '  top: 0;', '  left: 0;', '  bottom: 0;', '  width: 100%;', '  height: 100%;', '  background: #000;', '  opacity: 0.6;', '  z-index: 999;', '}', '', '.sticky-warn {', '  position: fixed;', '  top: 50%;', '  left: 50%;', '  transform: translate(-50%, -50%);', '  width: 500px;', '  min-height: 200px;', '  border-radius: 5px;', '  padding: 10px;', '  z-index: 999;', '  background-color: #fff;', '  box-shadow: 0 3px rgba(0,0,0,0.15), 0 0 10px rgba(0,0,0,0.1), inset 0 -3px rgba(0,0,0,0.15);', '}', '', '.warn-content {', '  text-align: center;', '}', '', '.warn-title {', '  font-size: 16px;', '  margin-bottom: 10px;', '  font-weight: 700;', '}', '', '.warn-text {', '  font-size: 12px;', '  text-align: justify;', '}', '', '.warn-btn {', '  margin-top: 10px;', '  background-color: #5CCD5C;', '  color: #FFF;', '  border-radius: 3px;', '  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);', '  font-size: 13px;', '  height: 36px;', '  line-height: 36px;', '  padding: 0 24px;', '  transform: translate(130%, 0);', '  border: none;', '  cursor: pointer;', '  transition: ease .2s;', '}', '', '.warn-btn:hover {', '  -ms-filter: brightness(90%);', '  -webkit-filter: brightness(90%);', '  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14), 0 5px 3px -2px rgba(0,0,0,0.2), 0 1px 8px 0 rgba(0,0,0,0.12);', '  color: #FFF;', '  filter: brightness(90%);', '  background-color: #3abc3a;', '}'].join('') }).appendTo('head') }) }(jQuery));

Você deve substituir Título do Anúncio pelo título do anúncio que aparecerá em negrito e com uma fonte maior. Além disso, substitua também Conteúdo do anúncio, que formará o corpo do seu anúncio.

Este é o resultado esperado.

Isso lhe agrada?
Chanp

Oi chanp, muito bom, pórém será que é possivel adicionar nesse mesmo código um botão para acessar um link especifico.

se possivel um botão igual ao botão "compreedi" porém um pouco menor?

Claro.
No código abaixo, substitua www.yoursite.com pelo URL do site a ser redirecionado.

Código:

(function($) { 'use strict'; var warn = { warn_code: 'Aviso - 07', title_warn: '<strong>Título do Anúncio</strong>', content: ['Conteúdo do anúncio.'].join('<br/>') };
    $(function() { var $warning = $(['<div class="sticky-back"></div>', '<div class="sticky-warn">', '  <div class="warn-content">', '    <div class="warn-title">' + warn.title_warn + '</div>', '    <div class="warn-text">' + warn.content + '</div>', '  </div>', '  <button class="warn-btn onclick="location.href = 'www.yoursite.com'">ACESSAR</button>', '</div>'].join('\n')); if (localStorage.getItem("warn_code") != warn.warn_code && _userdata.session_logged_in) { $warning.appendTo('body');
            localStorage.removeItem("warn_code");
            $('.warn-btn').hide();
            setTimeout(function() { $('.warn-btn').fadeIn(100) }, 5000) }
        $('.warn-btn').on('click', function() { localStorage.setItem("warn_code", warn.warn_code);
            $warning.hide() });
        $('<style>', { 'text': ['.sticky-back {', '  position: fixed;', '  top: 0;', '  left: 0;', '  bottom: 0;', '  width: 100%;', '  height: 100%;', '  background: #000;', '  opacity: 0.6;', '  z-index: 999;', '}', '', '.sticky-warn {', '  position: fixed;', '  top: 50%;', '  left: 50%;', '  transform: translate(-50%, -50%);', '  width: 500px;', '  min-height: 200px;', '  border-radius: 5px;', '  padding: 10px;', '  z-index: 999;', '  background-color: #fff;', '  box-shadow: 0 3px rgba(0,0,0,0.15), 0 0 10px rgba(0,0,0,0.1), inset 0 -3px rgba(0,0,0,0.15);', '}', '', '.warn-content {', '  text-align: center;', '}', '', '.warn-title {', '  font-size: 16px;', '  margin-bottom: 10px;', '  font-weight: 700;', '}', '', '.warn-text {', '  font-size: 12px;', '  text-align: justify;', '}', '', '.warn-btn {', '  margin-top: 10px;', '  background-color: #5CCD5C;', '  color: #FFF;', '  border-radius: 3px;', '  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);', '  font-size: 13px;', '  height: 36px;', '  line-height: 36px;', '  padding: 0 24px;', '  transform: translate(130%, 0);', '  border: none;', '  cursor: pointer;', '  transition: ease .2s;', '}', '', '.warn-btn:hover {', '  -ms-filter: brightness(90%);', '  -webkit-filter: brightness(90%);', '  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14), 0 5px 3px -2px rgba(0,0,0,0.2), 0 1px 8px 0 rgba(0,0,0,0.12);', '  color: #FFF;', '  filter: brightness(90%);', '  background-color: #3abc3a;', '}'].join('') }).appendTo('head') }) }(jQuery));

Chanp

Olá Chanp, agora nem abre mais o POP P

Olá,

Como eu disse, esse pop-up aparece apenas uma vez. Após clicar no botão "Compreendi", ele só aparece novamente quando o usuário limpar seus cookies ou acessar o fórum por outro navegador.

Chanp

Olá @weverson lopes,

O código que o @Chanp passou, realmente tem um erro, altere para:

Código:

(function($) { 'use strict'; var warn = { warn_code: 'Aviso - 07', title_warn: '<strong>Título do Anúncio</strong>', content: ['Conteúdo do anúncio.'].join('<br/>') };
    $(function() { var $warning = $(['<div class="sticky-back"></div>', '<div class="sticky-warn">', '  <div class="warn-content">', '    <div class="warn-title">' + warn.title_warn + '</div>', '    <div class="warn-text">' + warn.content + '</div>', '  </div>', '  <button class="warn-btn onclick="location.href = \'www.yoursite.com\'">ACESSAR</button>', '</div>'].join('\n')); if (localStorage.getItem("warn_code") != warn.warn_code && _userdata.session_logged_in) { $warning.appendTo('body');
            localStorage.removeItem("warn_code");
            $('.warn-btn').hide();
            setTimeout(function() { $('.warn-btn').fadeIn(100); }, 5000); }
        $('.warn-btn').on('click', function() { localStorage.setItem("warn_code", warn.warn_code);
            $warning.hide(); });
        $('<style>', { 'text': ['.sticky-back {', '  position: fixed;', '  top: 0;', '  left: 0;', '  bottom: 0;', '  width: 100%;', '  height: 100%;', '  background: #000;', '  opacity: 0.6;', '  z-index: 999;', '}', '', '.sticky-warn {', '  position: fixed;', '  top: 50%;', '  left: 50%;', '  transform: translate(-50%, -50%);', '  width: 500px;', '  min-height: 200px;', '  border-radius: 5px;', '  padding: 10px;', '  z-index: 999;', '  background-color: #fff;', '  box-shadow: 0 3px rgba(0,0,0,0.15), 0 0 10px rgba(0,0,0,0.1), inset 0 -3px rgba(0,0,0,0.15);', '}', '', '.warn-content {', '  text-align: center;', '}', '', '.warn-title {', '  font-size: 16px;', '  margin-bottom: 10px;', '  font-weight: 700;', '}', '', '.warn-text {', '  font-size: 12px;', '  text-align: justify;', '}', '', '.warn-btn {', '  margin-top: 10px;', '  background-color: #5CCD5C;', '  color: #FFF;', '  border-radius: 3px;', '  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);', '  font-size: 13px;', '  height: 36px;', '  line-height: 36px;', '  padding: 0 24px;', '  transform: translate(130%, 0);', '  border: none;', '  cursor: pointer;', '  transition: ease .2s;', '}', '', '.warn-btn:hover {', '  -ms-filter: brightness(90%);', '  -webkit-filter: brightness(90%);', '  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14), 0 5px 3px -2px rgba(0,0,0,0.2), 0 1px 8px 0 rgba(0,0,0,0.12);', '  color: #FFF;', '  filter: brightness(90%);', '  background-color: #3abc3a;', '}'].join('') }).appendTo('head'); }); }(jQuery));

Atenciosamente,
pedxz.

Oi pedx, funcionou porém quando vou digitar alguma coisa ele fica meio bugado, gostaria de pedir se não for muito que tivesse uma linha separando o titulo da descrição e que o texto que eu fosse digitar, aparecesse tudo centralizado sabe?

weverson lopes escreveu:Oi pedx, funcionou porém quando vou digitar alguma coisa ele fica meio bugado

Pode mandar-me o texto que deseja usar?

gostaria de pedir se não for muito que tivesse uma linha separando o titulo da descrição

Pelo que vi, já existe uma separação. O senhor pode tirar uma captura de ecrã (printscreen), para ver o seu problema?

e que o texto que eu fosse digitar, aparecesse tudo centralizado sabe?

Altere para:

Código:

(function($) { 'use strict'; var warn = { warn_code: 'Aviso - 07', title_warn: '<strong>Título do Anúncio</strong>', content: ['Conteúdo do anúncio.'].join('<br/>') };
    $(function() { var $warning = $(['<div class="sticky-back"></div>', '<div class="sticky-warn">', '  <div class="warn-content">', '    <div class="warn-title">' + warn.title_warn + '</div>', '    <div class="warn-text">' + warn.content + '</div>', '  </div>', '  <button class="warn-btn onclick="location.href = \'www.yoursite.com\'">ACESSAR</button>', '</div>'].join('\n')); if (localStorage.getItem("warn_code") != warn.warn_code && _userdata.session_logged_in) { $warning.appendTo('body');
            localStorage.removeItem("warn_code");
            $('.warn-btn').hide();
            setTimeout(function() { $('.warn-btn').fadeIn(100); }, 5000); }
        $('.warn-btn').on('click', function() { localStorage.setItem("warn_code", warn.warn_code);
            $warning.hide(); });
        $('<style>', { 'text': ['.sticky-back {', '  position: fixed;', '  top: 0;', '  left: 0;', '  bottom: 0;', '  width: 100%;', '  height: 100%;', '  background: #000;', '  opacity: 0.6;', '  z-index: 999;', '}', '', '.sticky-warn {', '  position: fixed;', '  top: 50%;', '  left: 50%;', '  transform: translate(-50%, -50%);', '  width: 500px;', '  min-height: 200px;', '  border-radius: 5px;', '  padding: 10px;', '  z-index: 999;', '  background-color: #fff;', '  box-shadow: 0 3px rgba(0,0,0,0.15), 0 0 10px rgba(0,0,0,0.1), inset 0 -3px rgba(0,0,0,0.15);', '}', '', '.warn-content {', '  text-align: center;', '}', '', '.warn-title {', '  font-size: 16px;', '  margin-bottom: 10px;', '  font-weight: 700;', '}', '', '.warn-text {', '  font-size: 12px;', '  text-align: center;', '}', '', '.warn-btn {', '  margin-top: 10px;', '  background-color: #5CCD5C;', '  color: #FFF;', '  border-radius: 3px;', '  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);', '  font-size: 13px;', '  height: 36px;', '  line-height: 36px;', '  padding: 0 24px;', '  transform: translate(130%, 0);', '  border: none;', '  cursor: pointer;', '  transition: ease .2s;', '}', '', '.warn-btn:hover {', '  -ms-filter: brightness(90%);', '  -webkit-filter: brightness(90%);', '  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14), 0 5px 3px -2px rgba(0,0,0,0.2), 0 1px 8px 0 rgba(0,0,0,0.12);', '  color: #FFF;', '  filter: brightness(90%);', '  background-color: #3abc3a;', '}'].join('') }).appendTo('head'); }); }(jQuery));

oi novamente pdx, agora centralizou o texto, antes estava assim



agora que editei o código está assim



o botão de acessar está torto, ha como centralizar?

Altere para:

Código:

(function($) { 'use strict'; var warn = { warn_code: 'Aviso - 07', title_warn: '<strong>Título do Anúncio</strong>', content: ['Conteúdo do anúncio.'].join('<br/>') };
    $(function() { var $warning = $(['<div class="sticky-back"></div>', '<div class="sticky-warn">', '  <div class="warn-content">', '    <div class="warn-title">' + warn.title_warn + '</div>', '    <div class="warn-text">' + warn.content + '</div>', '  </div>', '  <button class="warn-btn onclick="location.href = \'www.yoursite.com\'">ACESSAR</button>', '</div>'].join('\n')); if (localStorage.getItem("warn_code") != warn.warn_code && _userdata.session_logged_in) { $warning.appendTo('body');
            localStorage.removeItem("warn_code");
            $('.warn-btn').hide();
            setTimeout(function() { $('.warn-btn').fadeIn(100); }, 5000); }
        $('.warn-btn').on('click', function() { localStorage.setItem("warn_code", warn.warn_code);
            $warning.hide(); });
        $('<style>', { 'text': ['.sticky-back {', '  position: fixed;', '  top: 0;', '  left: 0;', '  bottom: 0;', '  width: 100%;', '  height: 100%;', '  background: #000;', '  opacity: 0.6;', '  z-index: 999;', '}', '', '.sticky-warn {', '  position: fixed;', '  top: 50%;', '  left: 50%;', '  transform: translate(-50%, -50%);', '  width: 500px;', '  min-height: 200px;', '  border-radius: 5px;', '  padding: 10px;', '  z-index: 999;', '  background-color: #fff;', 'text-align: center!important;', '  box-shadow: 0 3px rgba(0,0,0,0.15), 0 0 10px rgba(0,0,0,0.1), inset 0 -3px rgba(0,0,0,0.15);', '}', '', '.warn-content {', '  text-align: center;', '}', '', '.warn-title {', '  font-size: 16px;', '  margin-bottom: 10px;', '  font-weight: 700;', '}', '', '.warn-text {', '  font-size: 12px;', '  text-align: center;', '}', '', '.warn-btn {', '  margin-top: 10px;', '  background-color: #5CCD5C;', '  color: #FFF;', '  border-radius: 3px;', '  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);', '  font-size: 13px;', '  height: 36px;', '  line-height: 36px;', '  padding: 0 24px;', '  border: none;', '  cursor: pointer;', '  transition: ease .2s;', '}', '', '.warn-btn:hover {', '  -ms-filter: brightness(90%);', '  -webkit-filter: brightness(90%);', '  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14), 0 5px 3px -2px rgba(0,0,0,0.2), 0 1px 8px 0 rgba(0,0,0,0.12);', '  color: #FFF;', '  filter: brightness(90%);', '  background-color: #3abc3a;', '}'].join('') }).appendTo('head'); }); }(jQuery));

Oi pedx, não abre mais o pop up, testei em varios fóruns testes

Chanp escreveu:Como eu disse, esse pop-up aparece apenas uma vez. Após clicar no botão "Compreendi", ele só aparece novamente quando o usuário limpar seus cookies ou acessar o fórum por outro navegador.

weverson lopes escreveu:não abre mais o pop up, testei em varios fóruns testes

Tente com outro navegador ou limpar o cache do seu navegador

Oi pedx, desculpe a demora, estava tentando resolver o problema para ver se realmente funcionava, mas funcionou, o unico problema que deu é que quando eu vou clicar em acessar, ele não me redireciona para o link desejado!

Chanp escreveu:No código abaixo, substitua www.yoursite.com pelo URL do site a ser redirecionado.

Altere o seu código para:

Código:

(function($) { 'use strict'; var warn = { warn_code: 'Aviso - 07', title_warn: '<strong>Título do Anúncio</strong>', content: ['Conteúdo do anúncio.'].join('<br/>') };
    $(function() { var $warning = $(['<div class="sticky-back"></div>', '<div class="sticky-warn">', '  <div class="warn-content">', '    <div class="warn-title">' + warn.title_warn + '</div>', '    <div class="warn-text">' + warn.content + '</div>', '  </div>', '  <br /><br /><a class="warn-btn" href="www.yoursite.com">ACESSAR</a>', '</div>'].join('\n')); if (localStorage.getItem("warn_code") != warn.warn_code && _userdata.session_logged_in) { $warning.appendTo('body');
            localStorage.removeItem("warn_code");
            $('.warn-btn').hide();
            setTimeout(function() { $('.warn-btn').fadeIn(100); }, 5000); }
        $('.warn-btn').on('click', function() { localStorage.setItem("warn_code", warn.warn_code);
            $warning.hide(); });
        $('<style>', { 'text': ['.sticky-back {', '  position: fixed;', '  top: 0;', '  left: 0;', '  bottom: 0;', '  width: 100%;', '  height: 100%;', '  background: #000;', '  opacity: 0.6;', '  z-index: 999;', '}', '', '.sticky-warn {', '  position: fixed;', '  top: 50%;', '  left: 50%;', '  transform: translate(-50%, -50%);', '  width: 500px;', '  min-height: 200px;', '  border-radius: 5px;', '  padding: 10px;', '  z-index: 999;', '  background-color: #fff;', 'text-align: center!important;', '  box-shadow: 0 3px rgba(0,0,0,0.15), 0 0 10px rgba(0,0,0,0.1), inset 0 -3px rgba(0,0,0,0.15);', '}', '', '.warn-content {', '  text-align: center;', '}', '', '.warn-title {', '  font-size: 16px;', '  margin-bottom: 10px;', '  font-weight: 700;', '}', '', '.warn-text {', '  font-size: 12px;', '  text-align: center;', '}', '', '.warn-btn {', 'color: white!important;', '  margin-top: 30px!important;', '  background-color: #5CCD5C;', '  color: #FFF;', '  border-radius: 3px;', '  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);', '  font-size: 13px;', '  height: 36px;', '  line-height: 36px;', '  padding: 16px 24px;', '  border: none;', '  cursor: pointer;', '  transition: ease .2s;', '}', '', '.warn-btn:hover {', '  -ms-filter: brightness(90%);', '  -webkit-filter: brightness(90%);', '  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14), 0 5px 3px -2px rgba(0,0,0,0.2), 0 1px 8px 0 rgba(0,0,0,0.12);', '  color: #FFF;', '  filter: brightness(90%);', '  background-color: #3abc3a;', '}'].join('') }).appendTo('head'); }); }(jQuery));
 

perfeito. obrigado pedx