Boa noite! Gente sou iniciante em programação web. fiz um menu que abre um modal. porém só consigo abrir um formulário no modal. Como faço pra abrir o modal dos outros 2 formulários que ainda não conseguir abrir no modal. Vou deixar o código para os mestre dos magos analisarem.
window.onload = function(){ // Recupera o id do modal var modal = document.getElementById('myModal');// recupera o botão que abre o modal
var btn = document.getElementById("myBtn");
// Aqui é o botão de fechar o modal
var span = document.getElementsByClassName("close")[0];
// Abre o modal quando o botão de abrir é clicado
btn.onclick = function() {
modal.style.display = "block";
}
// Fecha o modal quando o botão de fechar é clicado
span.onclick = function() {
modal.style.display = "none";
}
// Fecha o modal quando alguem clica fora dele
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}</script>
<section id="login" style="top:20px;">
<img src="usu.jpg" alt="usuario" >
</section>
</section>
<div id="cabecalho-secundario" class="cor-ae">
<nav>
<ul >
<li >Cadastro
<ul >
<li id="cfc" ><a href="#" id="myBtn">Psicólogos</a></li>
</ul>
<ul >
<li id="cfc" ><a href="#" id="myBtn">Pacientes</a></li>
</ul>
</li>
<li>Marcar Consultas
<ul>
<li id="cfc" ><a href="acessoliberado.jsp">Cadastro</a></li>
</ul>
</li>
</ul>
×
Cadastro de Psicólogos
<fieldset class="grupo">
<div class="campo">
<label for="nome">Nome</label>
<input type="text" id="nome" name="nome" style="width: 20em" value="" />
</div>
</fieldset>
<div class="campo">
<label for="nome">Data de Nascimento</label>
<input type="date" id="datanascimento" name="crp" value="" />
</div>
<div class="campo">
<label for="nome">CRP-Conselho Regional de Psicologia</label>
<input type="text" id="crp" name="crp" style="width: 20em" value="" />
</div>
<div class="campo">
<label>Sexo</label>
<label class="checkbox">
<input type="radio" name="sexo" value="masculino"> Masculino
</label>
<label class="checkbox">
<input type="radio" name="sexo" value="feminino"> Feminino
</label>
</div>
<div class="campo">
<label for="email">E-mail</label>
<input type="text" id="email" name="email" style="width: 20em" value="" />
</div>
<div class="campo">
<label for="telefone">Telefone</label>
<input type="text" id="telefone" name="telefone" style="width: 20em" value="" />
</div>
<fieldset class="grupo">
<div class="campo">
<label for="cidade">Cidade</label>
<input type="text" id="cidade" name="cidade" style="width: 20em" value="" />
</div>
<div class="campo">
<label for="estado">Estado</label>
<select name="estado" id="estado">
<option value="">--</option>
<option value="PR">PR</option>
</select>
</div>
</fieldset>
<button class="botao submit" type="submit" name="submit">Cadastrar</button>
×
Cadastro de Pacientes
<fieldset class="grupo">
<div class="campo">
<label for="nome">Nome</label>
<input type="text" id="nome" name="nome" style="width: 20em" value="" />
</div>
</fieldset>
<div class="campo">
<label for="nome">Data de Nascimento</label>
<input type="date" id="datanascimento" name="crp" value="" />
</div>
<div class="campo">
<label for="nome">Matrícula</label>
<input type="text" id="matricula" style="width: 20em" value="" />
</div>
<div class="campo">
<label>Sexo</label>
<label class="checkbox">
<input type="radio" name="sexo" value="masculino"> Masculino
</label>
<label class="checkbox">
<input type="radio" name="sexo" value="feminino"> Feminino
</label>
</div>
<div class="campo">
<label for="email">E-mail</label>
<input type="text" id="email" name="email" style="width: 20em" value="" />
</div>
<div class="campo">
<label for="telefone">Telefone</label>
<input type="text" id="telefone" name="telefone" style="width: 20em" value="" />
</div>
<fieldset class="grupo">
<div class="campo">
<label for="cidade">Cidade</label>
<input type="text" id="cidade" name="cidade" style="width: 20em" value="" />
</div>
<div class="campo">
<label for="estado">Estado</label>
<select name="estado" id="estado">
<option value="">--</option>
<option value="PR">PR</option>
</select>
</div>
</fieldset>
<button class="botao submit" type="submit" name="submit">Cadastrar</button>
body{
margin: 0;
padding: 0;
}
/<em>Esse css é responsavel pela aparencia e posicionamento do modal</em>/
.modal {
display: none; /* Hidden by default <em>/
position: fixed; /</em> Stay in place <em>/
z-index: 1; /</em> Sit on top <em>/
left: 0;
top: 0;
width: 100%; /</em> Full width <em>/
height: 100%; /</em> Full height <em>/
overflow: auto; /</em> Enable scroll if needed <em>/
background-color: rgb(0,0,0); /</em> Fallback color <em>/
background-color: rgba(0,0,0,0.4); /</em> Black w/ opacity */
}
/* Modal Content/Box <em>/
.modal-content {
background-color: #fefefe;
margin: 15% auto; /</em> 15% from the top and centered <em>/
padding: 20px;
border: 1px solid #888;
width: 80%; /</em> Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/****************/
#menu-topo{
width: 100%;
height: 80px;
padding-top:10px;
}
#logo img{
height: 70px;
display: block;
margin: 0 auto;
}
#logof{
width: 200px;
position: absolute;
top: 45px;
left: 1000px;
font-style: italic;
color: #0C4E98;
}
#login{
width: 200px;
position: absolute;
top: 0;
right: 0;
}
#login img{
position: absolute;
width: 50px;
height: 50px;
top: 1px;
left: 50px;
border: 3px solid #0C4E98;
box-sizing: border-box;
border-radius: 50%;
}
#login p{
position: absolute;
width: 120px;
top: -8px;
left: 75px;
font: 15px roboto, opensans, verdana, sans-serif;
color: #0C4E98;
}
#login button{
position: absolute;
top: 40px;
left: 75px;
}
#cabecalho-secundario{
width: 100%;
height: 45px;
font-family: ubuntu, opensans, verdana, sans-serif;
text-decoration: none;
display: flex;
justify-content: center;
background-color:#e0c259;
font-size: 14px;
box-shadow: 0px 1px 3px;
}
#cabecalho-secundario ul{
position: relative;
max-width: 480px;
list-style: none;
margin: 0 auto;
}
#cabecalho-secundario ul >li{
position: relative;
float: left;
width: 170px;
height: 40px;
margin: 0;
text-align: center;
line-height: 40px;
text-transform: uppercase;
font-family: roboto, opensans, verdana, sans-serif;
}
#cabecalho-secundario ul :hover{
background: #ad801c;
}
#cabecalho-secundario ul li a{
text-decoration: none;
color:#0C4E98;
}
#cabecalho-secudario li {
height: 45px;
padding-top: 4px;;
}
#cabecalho-secundario ul li{
position: relative;
display: block;
box-sizing: border-box;
text-decoration: none;
color: #0C4E98;
cursor: pointer;
font-family: roboto, opensans, verdana, sans-serif;
padding-top: 4px;
height: 45px;
}
#cabecalho-secundario ul li {
background: #e0c259;
}
.cor-ae{
background-color: #e8ce71;
}
ul {
position: absolute;
margin: 0;
list-style:none;
}
li {
display: inline-block;
padding: 0px;
position: relative;
}
#cfc{
font-size: 12px; !important
}
li:hover > ul {
display: block;
}
ul ul {
position: absolute;
display: none;
margin: 0;
padding: 0px;
}
ul ul li {
display: block;
}
ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
}