Login em pop-up

Item: Login em pop-up
Rating: 1

por Kanelan 03.08.24 3:57

Detalhes da questão

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

Descrição

Eu gostaria de ter um pop-up de login no meu fórum, se possível fazer esse pop-up aparecer quando a pessoas estiver desconectada do fórum e apertar para fazer login e o pop-up aparecer.

Este é o modelo: https://prnt.sc/vymn7g
Fórum do modelo: https://fnsystem.forumeiros.com/login

Meu overall_header:

Código:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}> <head> <title>{SITENAME_TITLE}{PAGE_TITLE}</title> <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="content-script-type" content="text/javascript"/> <meta http-equiv="content-style-type" content="text/css"/>  <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}"/>   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}"/>  {META_FAVICO} {META} {META_FB_LIKE} <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}"/> {T_HEAD_STYLESHEET} {CSS} <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}"/> <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}"/> <script src="{JQUERY_PATH}" type="text/javascript"></script>  <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script> <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script> <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>  <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script> {RICH_SNIPPET_GOOGLE} <script type="text/javascript">!function(){var t,e=document.getElementById("darkSwitch");if(e){t=null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch"),(e.checked=t)?document.body.setAttribute("data-theme","dark"):document.body.removeAttribute("data-theme"),e.addEventListener("change",function(t){e.checked?(document.body.setAttribute("data-theme","dark"),localStorage.setItem("darkSwitch","dark")):(document.body.removeAttribute("data-theme"),localStorage.removeItem("darkSwitch"))})}}();</script>  <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script> <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>   <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css"/> <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>   <script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ /* Definir le sens de direction en fonction du panneau admin */ var tickerDirParam = "{switch_ticker.DIRECTION}"; var slid_vert = false; var auto_dir = 'next'; var h_perso = parseInt({switch_ticker.HEIGHT}); switch (tickerDirParam) { case 'top' : slid_vert = true; break; case 'left': break; case 'bottom': slid_vert = true; auto_dir = 'prev'; break; case 'right': auto_dir = 'prev'; break; default: slid_vert = true; } $(document).ready(function () { $('#fa_ticker_content').css('display', 'block'); var width_max = $('ul#fa_ticker_content').width(); var width_item = Math.floor(width_max / {switch_ticker.SIZE}); if (width_max > 0) { $('ul#fa_ticker_content li').css('float', 'left').css('list-style', 'none').width(width_item).find('img').each(function () { if ($(this).width() > width_item) { var ratio = $(this).width() / width_item; var new_height = Math.round($(this).height() / ratio); $(this).height(new_height).width(width_item); } }); if (slid_vert) { var height_max = h_perso; $('ul#fa_ticker_content li').each(function () { if ($(this).height() > height_max) { height_max = $(this).height(); } }); $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto'); $('ul#fa_ticker_content li').height(height_max); } $('#fa_ticker_content').jcarousel({ vertical: slid_vert, wrap: 'circular', auto: {switch_ticker.STOP_TIME}, auto_direction: auto_dir, scroll: 1, size: {switch_ticker.SIZE}, height_max: height_max, animation: {switch_ticker.SPEED} }); } else { $('ul#fa_ticker_content li:not(:first)').css('display', 'none'); $('ul#fa_ticker_content li:first').css('list-style', 'none').css('text-align', 'center'); } }); //]]> </script>  <script type="text/javascript">//<![CDATA[ $(document).ready(function () {  pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); if (pm != null) { pm.focus(); }   report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}'); if (report != null) { report.focus(); }   Ticker.start({ height: {switch_ticker.HEIGHT}, spacing: {switch_ticker.SPACING}, speed: {switch_ticker.SPEED}, direction: '{switch_ticker.DIRECTION}', pause: {switch_ticker.STOP_TIME} });  document.onclick = function(e){ if (!e.target.classList.contains('navicon')) { if ($(e.target).parents('.responsive-headerbar').length == 0 && e.target.id != "menu-btn") { document.getElementById('menu-btn').checked = false; } } }; });  var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false; $(document).ready(function () { $(window).resize(function () { var windowWidth = document.documentElement.clientWidth; var popupWidth = $("#login_popup").width(); var mypopup = $("#login_popup"); $("#login_popup").css({ "left": windowWidth / 2 - popupWidth / 2 }); }); });  //]]> </script> {GREETING_POPUP} <style type="text/css"> #page-footer, div.navbar, div.navbar ul.linklist { display: block !important; } ul.linklist li.rightside, ul.linklist li.rightside a.copyright { display: inline !important; }  .jcarousel-skin-tango .jcarousel-item { text-align: center; width: 10px; } .jcarousel-skin-tango .jcarousel-item-horizontal { margin-right: {switch_ticker.SPACING}px; } .jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: {switch_ticker.SPACING}px; }  </style> {HOSTING_JS}  <script async src="https://www.googletagmanager.com/gtag/js?id={G_ANALYTICS_ID}"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '{G_ANALYTICS_ID}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});  gtag('config', '{G_ANALYTICS_ID_BIS}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});  </script>  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese&display=swap" rel="stylesheet"/> <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/> </head> <body id="modernbb"> <div class="custom-switch"><input type="checkbox" class="toggle" id="darkSwitch"><label for="darkSwitch"></label></div>  <div id="hitskin_preview" style="display: block;"> <h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" loading="lazy" /> <em>Hit</em>skin.com</h1> <div class="content"> <p> {hitskin_preview.L_THEME_SITE_PREVIEW} <br/> <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span> </p> </div> </div>   <div id="inactive_popup" style="z-index: 10000 !important;"> <div class="h3">{inactive_users_modal.L_MODAL_TITLE}</div> <div id="inactive_popup_message">{inactive_users_modal.L_MODAL_BODY}</div> <div id="inactive_popup_buttons"> <button id="inactive_popup_url" class="button1">{inactive_users_modal.L_MODAL_BUTTON}</button> <button id="inactive_popup_close" class="button1">{inactive_users_modal.L_CLOSE}</button> </div> </div> <script type="text/javascript"> $('#inactive_popup #inactive_popup_close').on('mouseup', function () { document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;"; $('#inactive_popup').hide(50); }); $('#inactive_popup #inactive_popup_url').on('mouseup', function () { document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;"; location.href = '{inactive_users_modal.U_MODAL}' }) </script>   <div id="login_popup" style="z-index: 10000 !important;"> <div class="h3">{SITENAME}</div> <div id="login_popup_message"> {LOGIN_POPUP_MSG} </div>  <br/> <div class="h3">{switch_login_popup.switch_quick_login.L_QUICK_CONNECT}</div> <div> <div class="mt10"> <div class="social_btn">  <div class="fb-login-button"></div>     <div class="ti-connect"></div>  </div> </div> </div> <br/>  <div id="login_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="button1" value="{L_LOGIN}"/> <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/> <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}"/> </form> </div> </div>   <div id="like_popup" style="z-index: 10000 !important;"> <div class="h3">{SITENAME}</div> <div id="like_popup_message"> {LIKE_POPUP_MSG} </div> <div id="like_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="button1" value="{L_LOGIN}"/> <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/> <input id="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/> </form> </div> </div>  <a id="top" name="top" accesskey="t"></a> {JAVASCRIPT} <div id="page-header"> <div class="headerbar"> <div id="headerbar-top" class="responsive-headerbar"> <div class="wrap"> <input class="menu-btn" type="checkbox" id="menu-btn" /> <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label> <ul id="modernbb-nav-menu" class="navbar navlinks{NAVBAR_BORDERLESS}"> <li>{GENERATED_NAV_BAR}</li> </ul> </div> </div> <div class="wrap"> <div id="site-desc">  <div id="site-title">{switch_h1.MAIN_SITENAME}</div>   <p>{switch_desc.SITE_DESCRIPTION}</p>  </div> </div> </div>  <div id="fa_ticker_blockD" style="margin-top:4px;"> <div class="module"> <div class="inner"> <div id="fa_ticker_container"> <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">  <li>{switch_ticker.ticker_row.ELEMENT}</li>  </ul> </div> </div> </div> </div>  </div> <div class="conteneur_minwidth_IE modern-resp"> <div class="conteneur_layout_IE"> <div class="conteneur_container_IE"> <div id="wrap"> <div id="page-body">  <div id="fa_ticker_block" style="margin-top:4px;"> <div class="module"> <div class="inner"> <div id="fa_ticker_container"> <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;"> <div class="fa_ticker_content">  <div>{switch_ticker.ticker_row.ELEMENT}</div>  </div> </div> </div> </div> </div> </div>  <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}> <div id="outer-wrapper"> <div id="wrapper"> <div id="{ID_LEFT}">  {giefmod_index1.MODVAR}  <div style="height:{SPACE_ROW}px"></div>   </div> <div id="container"> <div id="content-main"> <div id="main"> <div id="main-content">  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

por Shek 03.08.24 22:37

Boa noite.

Este tópico possui a solução para sua dúvida: https://ajuda.forumeiros.com/t116203-login-em-pop-up

Atenciosamente,
Shek King

por Kanelan 04.08.24 13:26

Olá, já vi todos os tópicos e não consegui, visualizei que os usuários tiveram ajuda dos ajudeiros, onde os mesmos editaram o template, eu mesmo não consegui fazer por conta própria

por Shek 05.08.24 0:27

Boa noite.

Olha, se você quiser esperar os Ajudeiros, fique a vontade. Aliás, a última vez que vi um Ajudeiro online já tem meses (tipo, dois ou três meses online). Agora, se quiser tentar essa modificação abaixo acredito que você terá resultado.

No template overall_header, procure por esse trecho:

Código::  <div id="login_popup" style="z-index: 10000 !important;"> <div class="h3">{SITENAME}</div> <div id="login_popup_message"> {LOGIN_POPUP_MSG} </div>  <br/> <div class="h3">{switch_login_popup.switch_quick_login.L_QUICK_CONNECT}</div> <div> <div class="mt10"> <div class="social_btn">  <div class="fb-login-button"></div>     <div class="ti-connect"></div>  </div> </div> </div> <br/>  <div id="login_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="button1" value="{L_LOGIN}"/> <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/> <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}"/> </form> </div> </div>

Substitua por esse código:

Código::  <div id="login_popup" class="login-pop-up"> <div class="mfp-bg my-mfp-zoom-in mfp-ready"></div> <div class="mfp-wrap mfp-close-btn-in mfp-auto-cursor my-mfp-zoom-in mfp-ready" tabindex="-1" style="overflow: hidden auto;"> <div class="mfp-container mfp-s-ready mfp-inline-holder"> <div class="mfp-content"> <div id="login-dialog" class="login-popup zoom-anim-dialog"> <h3 class="aside-title">{switch_login_popup.switch_quick_login.L_QUICK_CONNECT}</h3> <form action="{S_LOGIN_ACTION}" method="post" class="login-form" name="form_login"> <p>{LOGIN_POPUP_MSG}</p> <label for="login-username-input-target" class="username-input"><input type="text" name="username" class="rounded-input blue-active inputbox fl_username" id="login-username-input-target" placeholder="{L_USERNAME}" autocomplete="username" required /><i class="ion-person" aria-hidden="true"></i></label> <label for="login-password-input-target" class="password-input"><input type="password" name="password" class="rounded-input blue-active inputbox fl_password" id="login-password-input-target" placeholder="{L_PASSWORD}" autocomplete="current-password" required /><i class="ion-key" aria-hidden="true"></i></label> <div style="font-size: 15px; margin-bottom: 5%;"> <label for="autologin-check">{L_AUTO_LOGIN}: <input id="autologin-check" class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> </div> <button type="submit" class="rounded-button login" id="doLogin" name="login">{L_LOGIN}</button> {S_HIDDEN_FIELDS} </form> <button type="button" class="rounded-button" style="background-color:#84c754;margin: 5px;" onclick="parent.location='{U_REGISTER}';">{L_REGISTER}</button> <button type="button" id="login_popup_close" class="mfp-close" title="{L_DONT_DISPLAY_AGAIN}">×</button> </div> </div> <div class="mfp-preloader">Loading...</div> </div> </div> </div>

Depois, acesse sua folha de estilos CSS, e inclua o código CSS do tópico que citei antes.

Eu fiz alguns ajustes:
- O idioma dos botões foram corrigidos com as variáveis de template padrão;
- Botão de registro ganha um evento onclick do template padrão;
- Inclusão da variável <p>{LOGIN_POPUP_MSG}</p> para inserir mensagens personalizadas a partir do painel;
- Inclusão da variável de tradução <h3 class="aside-title">{switch_login_popup.switch_quick_login.L_QUICK_CONNECT}</h3> para informar que se conectar é fácil (OBS, precisa ativar topic'it connect ou facebook connect);
- Corrigido bug do "close pop-up". Se fechar a pop-up é preciso limpar o cachê do navegador pra vê-la de novo;

O resultado é esse:

Caso ainda deseje aguardar um Ajudeiro, boa sorte. Feliz 2

Atenciosamente,
Shek King

por Kanelan 05.08.24 1:44

Olá, eu não quis dizer necessariamente um ajudeiro kkk, eu fico grato por pessoas como você com intenção de ajudar des de 2009! vamos la. eu coloquei do jeito que voce falou no template, porém não aparece a tela de login, poderia me dizer qual o problema ou se é o código css? veja:

por Shek 05.08.24 22:56

Boa noite.

Você precisa ativar a pop-up de conexão no fórum. Acesse o Painel > Geral >> Configurações >> Pop-up de conexão e clique na opção Sim em Ativar. Aliás, como eu descrevi na mensagem anterior, eu fiz upgrades no código, por tanto a popup padrão do fórum foi substituído pela nova. Se você fechar a popup uma vez, só será possível vê-la de novo quando limpar os cookies do navegador ou acessar na aba privada. Você pode ver o resultado aqui: https://shek.forumeiros.com

O código CSS deve ser incluso em Visualização > Imagens e Cores > Cores > Folha de estilos CSS > Muito feliz

por Kanelan 06.08.24 20:38

Muito obrigado ^^ foi, porém tem uns anuncios e algo que queria adicionar.

assim como este

gostaria que fosse fixo e não desse pra ninguem sair dessa tela de login, e quando eu estou nessa tela de log aparece uns anuncios. estamos em 90% Muito feliz

Link do fórum que vi isto:https://www.pmhabbo.com/login?redirect=%2Fgroups%3Fg%3D225

por Shek 07.08.24 9:42

Bom dia.

Então neste caso você vai ter que usar o código antigo mesmo. Além do mais, se forçar uma tela de login que não seja a nativa, os internautas podem nem querer mais acessar o fórum, visto que ele não terá conteúdo para ser lido. Ao invés de forçar uma pop-up de conexão, queira optar por um fórum privado: https://www.forumeiros.com/criar-forum-privado

Mas, para tentar ajudá-lo na dúvida, exclua a mudança que fez no template overall_header e siga os novos passos. Abra novamente o overall_header, e pesquise por <body id="modernbb">. Ao encontrá-lo, abaixo dele insira isso:

Código:: <div class="login-pop-up"> <div class="mfp-bg my-mfp-zoom-in mfp-ready"></div> <div class="mfp-wrap mfp-close-btn-in mfp-auto-cursor my-mfp-zoom-in mfp-ready" tabindex="-1" style="overflow: hidden auto;"> <div class="mfp-container mfp-s-ready mfp-inline-holder"> <div class="mfp-content"> <div id="login-dialog" class="login-popup zoom-anim-dialog"> <h3 class="aside-title">LOGAR NO FÓRUM</h3> <form action="/login" method="post" class="login-form" name="form_login"> <label for="login-username-input-target" class="username-input"><input type="text" name="username" class="rounded-input blue-active" id="login-username-input-target" placeholder="{L_USERNAME}" autocomplete="username" required=""><i class="fas fa-user" aria-hidden="true"></i></label><label for="login-password-input-target" class="password-input"><input type="password" name="password" class="rounded-input blue-active" id="login-password-input-target" placeholder="{L_PASSWORD}" autocomplete="current-password" required=""><i class="fas fa-key" aria-hidden="true"></i></label> <div style="font-size: 15px; margin-bottom: 5%;"><input class="radio" id="autologin-check" type="checkbox" name="autologin" checked="checked" {AUTOLOGIN_CHECKED} hidden><label for="autologin-check">Manter-me conectado.</label></div> <button type="submit" class="rounded-button login" id="doLogin" name="login">Vamos lá!</button> </form> <a href="/register"><button class="rounded-button register" name="register">Registrar</button></a><button title="Close (Esc)" type="button" class="mfp-close">×</button> </div> </div> <div class="mfp-preloader">Loading...</div> </div> </div> </div>

Procure em seguida por {CSS} e abaixo dela insira:

Código:: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/solid.css" integrity="sha384-ioUrHig76ITq4aEJ67dHzTvqjsAP/7IzgwE7lgJcg2r7BRNGYSK0LwSmROzYtgzs" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/regular.css" integrity="sha384-hCIN6p9+1T+YkCd3wWjB5yufpReULIPQ21XA/ncf3oZ631q2HEhdC7JgKqbk//4+" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/brands.css" integrity="sha384-i2PyM6FMpVnxjRPi0KW/xIS7hkeSznkllv+Hx/MtYDaHA5VcF0yL3KVlvzp8bWjQ" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/fontawesome.css" integrity="sha384-sri+NftO+0hcisDKgr287Y/1LVnInHJ1l+XC7+FOabmTTIK0HnE2ID+xxvJ21c5J" crossorigin="anonymous">

Depois, acesse a aba Módulos > HTML e Javascript > Gestão dos códigos javascript > Criar um novo javascript e cole este novo código:

Código:: $(function() { if(_userdata.session_logged_in == 0) { $('.login-pop-up').show(); } else { $('.login-pop-up').hide(); } });

Selecione o investimento para Todas as páginas e salve. O resultado já é visível no fórum. Contudo sobre a questão dos anúncios, você deve user o serviço de anúncios que desejar. Se fornecerem algum código que possa usar para exibir os anúncios, no template overall_header, insira o código do anunciante acima ou abaixo do código <div class="mfp-preloader">Loading...</div>.

Atenciosamente,
Shek King