InícioAdicionar login em pop-up
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1 • Compartilhe
Adicionar login em pop-up
por Ph1liphe 18.12.20 15:01
Detalhes da questão
Endereço do fórum: https://testesf.forumeiros.com/
Versão do fórum: AwesomeBB
Descrição
Boa tarde, prezados!
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: [url=fnsystem.forumeiros.com]fnsystem.forumeiros.com[/url]
Se possível também no lugar do emblema colocar (ou me ensinar) essa imagem: https://i.imgur.com/Y6SFLhc.png e a imagem de fundo: https://i.imgur.com/2JZxwd5.png
Meu overall_header:
- Código:
<!DOCTYPE HTML>
<link rel="shortcut icon" type="image/x-icon" href="https://i.servimg.com/u/f58/20/01/23/21/y6sflh10.png" />
<audio id="audio" src="https://sonic.dedicado.stream:7004/stream" autoplay style="display: none;"></audio> <script src="https://api2.truesecurity.com.br/truePlayer.js/sonic.dedicado.stream/7004/audio?t=1585214756" DEFER></script> <script>$(document).ready(function() { setInterval(function() { truePlayer.checkAutoPlay(); }, truePlayer.intervalTime); }); </script>
<html lang="{L_LANG_HTML}">
<head>
<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">
<meta charset="{S_CONTENT_ENCODING}" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
{T_HEAD_STYLESHEET}
<meta name="theme-color" content="{GG_THEME_COLOR}" />
<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>
<!-- BEGIN switch_recent_jquery -->
<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>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
<!-- BEGIN switch_fb_login -->
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
<script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker -->
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
Ticker.start({
height : {switch_ticker.HEIGHT},
spacing : {switch_ticker.SPACING},
speed : {switch_ticker.SPEED},
direction : '{switch_ticker.DIRECTION}',
pause : {switch_ticker.STOP_TIME}
});
});
//]]>
</script>
<!-- END switch_ticker -->
{RICH_SNIPPET_GOOGLE}
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
_gaq.push(['_trackPageview']);
<!-- BEGIN google_analytics_code_bis -->
_gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
_gaq.push(['b._trackPageview']);
<!-- END google_analytics_code_bis -->
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
<!-- END google_analytics_code -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<style>
#logo-text {
max-width: calc(100% - 150px);
}
.forum-description img {
max-width: calc(100% - 15px);
}
</style>
</head>
<body id="top">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<div id="main-menu" class="hidden">
<div class="logomenu"><img src="https://i.imgur.com/Y6SFLhc.png" style="width:45px"></div>
<div class="main-menu-headline">Bem-vindo ao Acesso Rápido!</div>
<ul><li><a href="/?tt=1"><i class="material-icons">home</i><span>Início</span></a></li></ul>
<div class="divider"></div>
<un><li><a href="https://abre.ai/awardspm"><i class="material-icons">check_circle</i><span>PMHH Awards - VOTE!</span></a><un><un><li><a href="https://pmhh.forumeiros.com/t205-estatuto-dos-policiais-militares-da-policia-militar-do-habbo-hotel"><i class="material-icons">sticky_note_2</i><span>Estatuto Militar</span></a><li><a href="https://pmhh.forumeiros.com/t1388-anexo-1-plano-de-acao-emergencial-pae"><i class="material-icons">security</i><span>Plano de Ação Emergencial</span></a></li><li><a href="https://pmhh.forumeiros.com/t1389-anexo-2-codigo-penal-militar"><i class="material-icons">sticky_note_2</i><span>Código Penal</span></a></li><li><a href="https://pmhh.forumeiros.com/t1391-anexo-3-normas-de-vestimenta-militar"><i class="material-icons">sticky_note_2</i><span>Normas de Vestimentas</span></a><li><a href="https://pmhh.forumeiros.com/t219-listagem-corpo-de-pracas"><i class="material-icons">list_alt</i><span>Listagem: Praças</span></a><li><a href="https://pmhh.forumeiros.com/t220-listagem-soldados"><i class="material-icons">list_alt</i><span>Listagem: Soldados</span></a></li><li><a href="https://pmhh.forumeiros.com/t2274-requerimento-pracas"><i class="material-icons">playlist_add</i><span>Requerimento: Praças</span></a></li><li><a href="https://pmhh.forumeiros.com/t2384-requerimento-cadastro-de-soldados"><i class="material-icons">playlist_add</i><span>Requerimento: Soldados</span></a></li><li><a href="https://docs.google.com/forms/d/e/1FAIpQLSf_5FkNe3eXqg85tLrT0DEuokztV-CHrcz0KGr7aMky7JulhA/viewform"><i class="material-icons">person_pin</i><span>Presença de O.G</span></a></li><li><a href="https://forms.gle/jYDPYqYvjY8hsnv47"><i class="material-icons">policy
</i><span>Registro de Denúncia</span></a><li></un>
</div>
<div id="main-user-menu" class="hidden">
</div>
<div id="notif-menu" class="hidden">
<div class="main-menu-headline" data-text="_lang['Notifications']"></div>
<ul id="notif_list">
<li id="notif-view-all"><a href="/profile?mode=editprofile&page_profil=notifications" data-text="_lang['Notif_see_all']"></a></li>
</ul>
<div id="live_notif">
</div>
</div>
<div id="header-banner"><div class="nuvens"></div><div class="plantas"></div><div class="animated rubberBand container content clearfix">
<!--<a href='' class='link-menu'><i class='fa fa-bars'></i></a>-->
<a href="/" class="logo clearfix">
<img title="Polícia Militar do Habbo Hotel :registered:" src="https://i.imgur.com/Y6SFLhc.png" class="pull-left" style="width:150px">
</a>
</div><div class="container perfil"> <div class="navbar-user">
<div class="is-normal"> <label class="user-menu-open-button" for="user-menu-open">
<div class="avatar">
<!-- BEGIN switch_user_logged_in -->
<script type="text/javascript">
//<![CDATA[
$(function() {
'use strict';
$('.avatar').append("<img src='https://www.habbo.com.br/habbo-imaging/avatarimage?hb=image&user=" + _userdata.username + "&action=wav&direction=3&head_direction=3&img_format=png&gesture=std&headonly=0&size=l' />");
$('.avatar img').css('left', '10px');
$('.avatar img').css('top', '-5px');
});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(function() {
'use strict';
$('.avatar').append("<img src='https://www.habbo.com.br/habbo-imaging/avatarimage?user=,Mulequinho&action=crr=667&direction=4&head_direction=3&gesture=sml&size=l' />");
$('.avatar img').css('left', '10px');
$('.avatar img').css('top', '-5px');
});
//]]>
</script>
</script>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<script type="text/javascript">
//<![CDATA[
$(function() {
'use strict';
$('.avatar').append("<img src='https://www.habbo.com.br/habbo-imaging/avatarimage?hb=image&user=" + _userdata.username + "&action=wav&direction=3&head_direction=3&img_format=png&gesture=std&headonly=0&size=l' title='Clique para mais opções'/>");
$('.avatar img').css('left', '10px');
$('.avatar img').css('top', '-5px');
});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(function() {
'use strict';
$('.avatar').append("<img src='https://www.habbo.com.br/habbo-imaging/avatarimage?user=,Mulequinho&action=std&direction=4&head_direction=4&gesture=srp&size=l' />");
$('.avatar img').css('left', '10px');
$('.avatar img').css('top', '-5px');
});
//]]>
</script>
</script>
<!-- END switch_user_logged_out -->
</div>
</label>
</div>
<style type="text/css">
.fa-widget-trophy {
text-align: center;
}
.fa-widget-trophy .fa-bottom-widget {
margin-top: 10px;
}
</style>
</div></div>
</div></div>
<div class="wrap">
<!-- BEGIN switch_desc -->
<h2 style="transition: none !important; opacity: 0;">{switch_desc.SITE_DESCRIPTION}</h2>
<!-- END switch_desc -->
</div>
</div>
<div id="site_widgets" style="display: none">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="wrap">
<header>
<div id="main-menu-btn">
<i class="material-icons">menu</i>
</div>
<a id="logo-link" href="{U_INDEX}">
<div id="logo">
<!-- BEGIN switch_logo_mob -->
<img src="{switch_logo_mob.LOGO_MOB}" alt="{L_INDEX}" />
<!-- END switch_logo_mob -->
</div>
<!-- BEGIN switch_h1 -->
<span id="logo-text">{switch_h1.MAIN_SITENAME}</span>
<!-- END switch_h1 -->
</a>
<!-- BEGIN switch_user_logged_out -->
<a href="{S_LOGIN_ACTION}" class="button">{L_LOGIN}</a>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<a href="javascript:void(0)" id="header-user"></a>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSeSyiRukk845CbrG3JzzeAYfIS8-r_XDazuxukUihUhwuqB4w/closedform" id="header-notif"><i class="material-icons">grade</i></a>
<!-- END switch_user_logged_in -->
<form method="get" action="{ACTION_SEARCH}" id="search-main">
<input type="text" name="search_keywords" maxlength="128" placeholder="{L_SEARCH}" />
<button type="submit"><i class="material-icons">search</i></button>
</form>
<ul id="header-navigation">
<li><a id="navigation-home" href="{NAVIGATION_HOME}"><i class="material-icons">home</i>Início</a></li>
<li><a id="navigation-recent" href="/c6-setor-administrativo-militar"><i class="material-icons">account_balance</i>Recursos Humanos</a></li>
<!-- BEGIN switch_user_logged_in -->
<li><a id="navigation-recent" href="/groups"><i class="material-icons">assignment</i>Funções</a></li>
<li><a id="navigation-recent" href="/profile?mode=editprofile"><i class="material-icons">account_circle</i> Perfil</a></li>
<li><a id="navigation-recent" href="/privmsg?folder=inbox"><i class="material-icons">email</i> {PRIVATE_MESSAGE_INFO}</a></li>
<!-- END switch_user_logged_in -->
</header>
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block">
<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">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<head><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"></head>
<!-- END switch_ticker -->
<!-- BEGIN html_validation -->
</div><!-- <div id="wrap" /> -->
</body>
</html>
<!-- END html_validation -->
Ph1liphe- **
- Membro desde : 07/12/2020
Mensagens : 59
Pontos : 97 -
Re: Adicionar login em pop-up
por Roevs 18.12.20 19:45
Olá,
Substitua seu "overall_header" por esse
Depois adiciona o código abaixo na sua Folha de estilo CSS
https://pastebin.com/ZBAjcVYY
Ainda não vai aparecer o pop-up, depois de adicionar os códigos me avise para eu fazer o código necessário pra funcionar.
Até mais!
Substitua seu "overall_header" por esse
- Código:
<!DOCTYPE HTML>
<link rel="shortcut icon" type="image/x-icon" href="https://i.servimg.com/u/f58/20/01/23/21/y6sflh10.png" />
<audio id="audio" src="https://sonic.dedicado.stream:7004/stream" autoplay style="display: none;"></audio> <script src="https://api2.truesecurity.com.br/truePlayer.js/sonic.dedicado.stream/7004/audio?t=1585214756" DEFER></script> <script>$(document).ready(function() { setInterval(function() { truePlayer.checkAutoPlay(); }, truePlayer.intervalTime); }); </script>
<html lang="{L_LANG_HTML}">
<head>
<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">
<meta charset="{S_CONTENT_ENCODING}" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
{T_HEAD_STYLESHEET}
<meta name="theme-color" content="{GG_THEME_COLOR}" />
<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>
<!-- BEGIN switch_recent_jquery -->
<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>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
<!-- BEGIN switch_fb_login -->
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
<script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker -->
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
Ticker.start({
height : {switch_ticker.HEIGHT},
spacing : {switch_ticker.SPACING},
speed : {switch_ticker.SPEED},
direction : '{switch_ticker.DIRECTION}',
pause : {switch_ticker.STOP_TIME}
});
});
//]]>
</script>
<!-- END switch_ticker -->
{RICH_SNIPPET_GOOGLE}
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
_gaq.push(['_trackPageview']);
<!-- BEGIN google_analytics_code_bis -->
_gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
_gaq.push(['b._trackPageview']);
<!-- END google_analytics_code_bis -->
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
<!-- END google_analytics_code -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<style>
#logo-text {
max-width: calc(100% - 150px);
}
.forum-description img {
max-width: calc(100% - 15px);
}
</style>
</head>
<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>
<body id="top">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<div id="main-menu" class="hidden">
<div class="logomenu"><img src="https://i.imgur.com/Y6SFLhc.png" style="width:45px"></div>
<div class="main-menu-headline">Bem-vindo ao Acesso Rápido!</div>
<ul><li><a href="/?tt=1"><i class="material-icons">home</i><span>Início</span></a></li></ul>
<div class="divider"></div>
<un><li><a href="https://abre.ai/awardspm"><i class="material-icons">check_circle</i><span>PMHH Awards - VOTE!</span></a><un><un><li><a href="https://pmhh.forumeiros.com/t205-estatuto-dos-policiais-militares-da-policia-militar-do-habbo-hotel"><i class="material-icons">sticky_note_2</i><span>Estatuto Militar</span></a><li><a href="https://pmhh.forumeiros.com/t1388-anexo-1-plano-de-acao-emergencial-pae"><i class="material-icons">security</i><span>Plano de Ação Emergencial</span></a></li><li><a href="https://pmhh.forumeiros.com/t1389-anexo-2-codigo-penal-militar"><i class="material-icons">sticky_note_2</i><span>Código Penal</span></a></li><li><a href="https://pmhh.forumeiros.com/t1391-anexo-3-normas-de-vestimenta-militar"><i class="material-icons">sticky_note_2</i><span>Normas de Vestimentas</span></a><li><a href="https://pmhh.forumeiros.com/t219-listagem-corpo-de-pracas"><i class="material-icons">list_alt</i><span>Listagem: Praças</span></a><li><a href="https://pmhh.forumeiros.com/t220-listagem-soldados"><i class="material-icons">list_alt</i><span>Listagem: Soldados</span></a></li><li><a href="https://pmhh.forumeiros.com/t2274-requerimento-pracas"><i class="material-icons">playlist_add</i><span>Requerimento: Praças</span></a></li><li><a href="https://pmhh.forumeiros.com/t2384-requerimento-cadastro-de-soldados"><i class="material-icons">playlist_add</i><span>Requerimento: Soldados</span></a></li><li><a href="https://docs.google.com/forms/d/e/1FAIpQLSf_5FkNe3eXqg85tLrT0DEuokztV-CHrcz0KGr7aMky7JulhA/viewform"><i class="material-icons">person_pin</i><span>Presença de O.G</span></a></li><li><a href="https://forms.gle/jYDPYqYvjY8hsnv47"><i class="material-icons">policy
</i><span>Registro de Denúncia</span></a><li></un>
</div>
<div id="main-user-menu" class="hidden">
</div>
<div id="notif-menu" class="hidden">
<div class="main-menu-headline" data-text="_lang['Notifications']"></div>
<ul id="notif_list">
<li id="notif-view-all"><a href="/profile?mode=editprofile&page_profil=notifications" data-text="_lang['Notif_see_all']"></a></li>
</ul>
<div id="live_notif">
</div>
</div>
<div id="header-banner"><div class="nuvens"></div><div class="plantas"></div><div class="animated rubberBand container content clearfix">
<!--<a href='' class='link-menu'><i class='fa fa-bars'></i></a>-->
<a href="/" class="logo clearfix">
<img title="Polícia Militar do Habbo Hotel :registered:" src="https://i.imgur.com/Y6SFLhc.png" class="pull-left" style="width:150px">
</a>
</div><div class="container perfil"> <div class="navbar-user">
<div class="is-normal"> <label class="user-menu-open-button" for="user-menu-open">
<div class="avatar">
<!-- BEGIN switch_user_logged_in -->
<script type="text/javascript">
//<![CDATA[
$(function() {
'use strict';
$('.avatar').append("<img src='https://www.habbo.com.br/habbo-imaging/avatarimage?hb=image&user=" + _userdata.username + "&action=wav&direction=3&head_direction=3&img_format=png&gesture=std&headonly=0&size=l' />");
$('.avatar img').css('left', '10px');
$('.avatar img').css('top', '-5px');
});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(function() {
'use strict';
$('.avatar').append("<img src='https://www.habbo.com.br/habbo-imaging/avatarimage?user=,Mulequinho&action=crr=667&direction=4&head_direction=3&gesture=sml&size=l' />");
$('.avatar img').css('left', '10px');
$('.avatar img').css('top', '-5px');
});
//]]>
</script>
</script>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<script type="text/javascript">
//<![CDATA[
$(function() {
'use strict';
$('.avatar').append("<img src='https://www.habbo.com.br/habbo-imaging/avatarimage?hb=image&user=" + _userdata.username + "&action=wav&direction=3&head_direction=3&img_format=png&gesture=std&headonly=0&size=l' title='Clique para mais opções'/>");
$('.avatar img').css('left', '10px');
$('.avatar img').css('top', '-5px');
});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(function() {
'use strict';
$('.avatar').append("<img src='https://www.habbo.com.br/habbo-imaging/avatarimage?user=,Mulequinho&action=std&direction=4&head_direction=4&gesture=srp&size=l' />");
$('.avatar img').css('left', '10px');
$('.avatar img').css('top', '-5px');
});
//]]>
</script>
</script>
<!-- END switch_user_logged_out -->
</div>
</label>
</div>
<style type="text/css">
.fa-widget-trophy {
text-align: center;
}
.fa-widget-trophy .fa-bottom-widget {
margin-top: 10px;
}
</style>
</div></div>
</div></div>
<div class="wrap">
<!-- BEGIN switch_desc -->
<h2 style="transition: none !important; opacity: 0;">{switch_desc.SITE_DESCRIPTION}</h2>
<!-- END switch_desc -->
</div>
</div>
<div id="site_widgets" style="display: none">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="wrap">
<header>
<div id="main-menu-btn">
<i class="material-icons">menu</i>
</div>
<a id="logo-link" href="{U_INDEX}">
<div id="logo">
<!-- BEGIN switch_logo_mob -->
<img src="{switch_logo_mob.LOGO_MOB}" alt="{L_INDEX}" />
<!-- END switch_logo_mob -->
</div>
<!-- BEGIN switch_h1 -->
<span id="logo-text">{switch_h1.MAIN_SITENAME}</span>
<!-- END switch_h1 -->
</a>
<!-- BEGIN switch_user_logged_out -->
<a href="{S_LOGIN_ACTION}" class="button">{L_LOGIN}</a>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<a href="javascript:void(0)" id="header-user"></a>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSeSyiRukk845CbrG3JzzeAYfIS8-r_XDazuxukUihUhwuqB4w/closedform" id="header-notif"><i class="material-icons">grade</i></a>
<!-- END switch_user_logged_in -->
<form method="get" action="{ACTION_SEARCH}" id="search-main">
<input type="text" name="search_keywords" maxlength="128" placeholder="{L_SEARCH}" />
<button type="submit"><i class="material-icons">search</i></button>
</form>
<ul id="header-navigation">
<li><a id="navigation-home" href="{NAVIGATION_HOME}"><i class="material-icons">home</i>Início</a></li>
<li><a id="navigation-recent" href="/c6-setor-administrativo-militar"><i class="material-icons">account_balance</i>Recursos Humanos</a></li>
<!-- BEGIN switch_user_logged_in -->
<li><a id="navigation-recent" href="/groups"><i class="material-icons">assignment</i>Funções</a></li>
<li><a id="navigation-recent" href="/profile?mode=editprofile"><i class="material-icons">account_circle</i> Perfil</a></li>
<li><a id="navigation-recent" href="/privmsg?folder=inbox"><i class="material-icons">email</i> {PRIVATE_MESSAGE_INFO}</a></li>
<!-- END switch_user_logged_in -->
</header>
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block">
<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">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<head><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"></head>
<!-- END switch_ticker -->
<!-- BEGIN html_validation -->
</div><!-- <div id="wrap" /> -->
</body>
</html>
<!-- END html_validation -->
Depois adiciona o código abaixo na sua Folha de estilo CSS
https://pastebin.com/ZBAjcVYY
Ainda não vai aparecer o pop-up, depois de adicionar os códigos me avise para eu fazer o código necessário pra funcionar.
Até mais!
Roevs- Membro Entusiasta
- Membro desde : 10/02/2012
Mensagens : 6484
Pontos : 8343 -
Ph1liphe- **
- Membro desde : 07/12/2020
Mensagens : 59
Pontos : 97 -
Ph1liphe- **
- Membro desde : 07/12/2020
Mensagens : 59
Pontos : 97 -
Re: Adicionar login em pop-up
por Roevs 22.12.20 11:06
Olá,
Ficou faltando você adicionar o código CSS na sua Folha de estilo CSS
Até mais!
Ficou faltando você adicionar o código CSS na sua Folha de estilo CSS
- Código:
/**************** LOGIN ******************/
.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8;
}
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden;
}
.mfp-container {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
box-sizing: border-box;
}
.mfp-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.mfp-auto-cursor .mfp-content {
cursor: auto;
}
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto;
}
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 999;
}
.mfp-s-ready .mfp-preloader {
display: none;
}
.mfp-preloader {
color: #CCC;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 999;
}
.login-popup {
-webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
box-shadow: 0 0 20px rgba(0,0,0,.4);
background-color: #fff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
position: relative;
padding: 37px 50px 50px 325px;
width: auto;
max-width: 645px;
margin: 20px auto;
overflow: hidden;
}
.login-popup:before {
background-image: url(https://i.imgur.com/2JZxwd5.png);
background-position: -435px -67px;
left: -95px;
}
.login-popup:before, .login-popup:after {
-webkit-border-radius: 192px/290px;
-moz-border-radius: 192px/290px;
border-radius: 192px/290px;
width: 385px;
height: 580px;
position: absolute;
content: "";
top: 0;
display: block;
bottom: 0;
margin: auto;
}
.login-popup h3 {
margin-bottom: 30px;
font-size: 20px;
line-height: 26px;
border-bottom: 1px solid rgba(0,0,0,.2);
padding-bottom: 10px;
margin-bottom: 25px;
margin-top: 0;
}
.h3, h3 {
border-color: #3793ff;
border-style: solid;
border-width: 0 0 1px;
color: #1a1a1a;
font-family: Roboto, sans-serif;
font-size: 1.6rem;
font-weight: 400;
letter-spacing: .3px;
margin-bottom: 12px;
padding-bottom: 3px;
}
.login-popup .login-form .username-input, .login-popup .login-form .password-input {
position: relative;
display: block;
}
label {
color: #1a1a1a;
cursor: pointer;
margin-right: 18px;
}
.login-popup .login-form .rounded-input {
padding-right: 40px;
margin-bottom: 15px;
background-color: #fff;
-webkit-border-radius: 48px;
-moz-border-radius: 48px;
border-radius: 48px;
padding: 11px 24px;
display: block;
font-family: poppins,Arial,sans-serif;
font-weight: 300;
font-size: 14px;
color: #333;
border: 1px solid #d4d4d4;
width: 100%;
height: 47px;
-webkit-transition: border-color .2s;
transition: border-color .2s;
}
.login-popup .login-form .username-input i, .login-popup .login-form .password-input i {
font-size: 18px;
font-weight: 700;
color: #d4d4d4;
position: absolute;
top: 13px;
right: 18px;
cursor: text;
display: block;
-webkit-transition: color .2s;
transition: color .2s;
}
.login-popup .login-form .username-input i:before, .login-popup .login-form .password-input i:before {
font-size: 18px;
}
.fa-user:before {
content: "\f007";
}
.fa, .fas {
font-family: "Font Awesome 5 Pro";
font-weight: 900;
}
.fa, .fab, .fad, .fal, .far, .fas {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
input[type="radio"]:checked, input[type="checkbox"]:checked {
background-color: #107cc9;
color: #fff;
}
input[type="checkbox"] {
border-radius: 3px;
}
input[type="radio"], input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
background-color: #f1f1f1;
color: #666;
height: 15px;
width: 15px;
border: 0;
cursor: pointer;
margin-right: 5px;
outline: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 0 2px rgba(0,0,0,0.1);
}
input[type="radio"] ~ label, input[type="checkbox"] ~ label {
font: 15px/1.7 'Open Sans', sans-serif;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
cursor: pointer;
vertical-align: middle;
}
.rounded-button.login {
background-color: #15253d;
}
.login-popup .rounded-button {
-webkit-border-radius: 48px;
-moz-border-radius: 48px;
border-radius: 48px;
padding: 11px 24px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
cursor: pointer;
height: 47px;
line-height: 21px;
text-shadow: none;
text-align: center;
-webkit-transition: background-color .2s,color .2s;
transition: background-color .2s,color .2s;
display: block;
width: 100%;
color: #fff;
}
.mfp-close-btn-in .mfp-close {
color: #333;
}
button.mfp-close, button.mfp-arrow {
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
outline: none;
padding: 0;
z-index: 999;
box-shadow: none;
touch-action: manipulation;
}
.mfp-close {
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
text-align: center;
opacity: 0.65;
padding: 0 0 18px 10px;
color: #FFF;
font-style: normal;
font-size: 28px;
font-family: Arial, Baskerville, monospace;
}
.login-popup::after {
background-image: url(https://i.imgur.com/Y6SFLhc.png);
background-position: 72% center;
background-repeat: no-repeat;
left: -95px;
background-size: 170px;
}
.login-popup:before, .login-popup:after {
-webkit-border-radius: 192px/290px;
-moz-border-radius: 192px/290px;
border-radius: 192px/290px;
width: 385px;
height: 580px;
position: absolute;
content: "";
top: 0;
display: block;
bottom: 0;
margin: auto;
}
.login-pop-up {
display: none;
}
Até mais!
Roevs- Membro Entusiasta
- Membro desde : 10/02/2012
Mensagens : 6484
Pontos : 8343 -
Re: Adicionar login em pop-up
por tikky 28.12.20 13:33
Tópico resolvidoTópico arquivado por inatividade por parte do autor, marcado como resolvido por ter solução apropriada à questão. |
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217
Tópicos semelhantes» Adicionar login em pop-up
» Adicionar Pop up de Login
» Adicionar imagem ao pop-up de login
» Adicionar alertas ao pop-up de login
» Adicionar barra de login no topo do fórum
» Adicionar Pop up de Login
» Adicionar imagem ao pop-up de login
» Adicionar alertas ao pop-up de login
» Adicionar barra de login no topo do fórum
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
Facebook
Twitter
Youtube
