0
I would like to know how to open this screen when clicking on an image, as the example:
1 answer
1
In a very simple way, with CSS and some Javascript lines.
Look like the example in your image just act in CSS. Have fun!!
<style type="text/css">
#showDiv {
width:250px;
margin:auto;
position: absolute;
border: 3px solid #73AD21;
top: 44px;
left: 10px;
z-index:1;
background-color: #F5F5F5;
text-align: center;
padding:3px;
color: black;
font-family: Arial;
font-size: 13px;
cursor: point;
}
.fechar {
text-align: right;
margin-right: 10px;
font-size: 12px;
color: blue;
}
</style>
<script type='text/javascript'>
function show() {
showDiv.style.display='inline-block';
}
function hide(obj) {
var el = document.getElementById(obj);
el.style.display = 'none';
}
</script>
<img src="https://i.stack.imgur.com/sFkYI.png" id="link" onclick="show()">
<div style="display: none;" id="showDiv" onClick="hide('showDiv')">
<h3 style="background-color: #C0C0C0">CAIXA DE ENTRADA</h3>
<p>Você pode configurar esta janela com CSS.No momento o CSS é conforme mostrado abaixo</p>
<p>#showDiv {<br>
width:250px; <br>
margin:auto;<br>
...............<br>
}</p>
<form action="/unanswered" method="post">
<p>Registre-se ou faça <a href="#">log-in</a></p>
<p><input type="submit" value="Registrar-se" style="color: #000000; background-color: #FFFFFF"> </p>
</form>
<p class="fechar"><span style="cursor:pointer">fechar</span></p>
</div>
-
Thank you very much, helped me a lot, I am in the second year of technical high school in computer science, I’m just learning WEB development, so the lack of knowledge. Thank you very much
Browser other questions tagged html css
You are not signed in. Login or sign up in order to post.
This can be done in N ways. Start trying to do and if questions arise regarding the code you can ask specific questions.
– Sam
@dvd, actually N+1 ways. You forgot the example of my answer! The property
widhtin Code Snippet does not work properly, you’ve noticed this?– user60252
Welcome João Vitor Batistella, some things you should know are: https://answall.com/help/mcve. plus this https://pt.meta.stackoverflow.com/questions/5483/manual-de-como-n%C3%83o-fazer-perguntas/5485#5485 and finally mark an answer as it accepts https://i.stack.Imgur.com/evLUR.png and why to mark how it accepts https://pt.meta.stackoverflow.com/questions/1078/como-e-por-que-aceitar-uma-resposta/1079#1079
– user60252