Popups/Modais Javascript

Question

Well, I’ve been trying for a couple of days to do the following:

• By clicking on the sign-up button, open the registration modal, by clicking on the information button, open the same
• By clicking to return, you will both receive the display none
• By clicking outside of them, you will both receive display none

Login

Enter

                <button id="primeiro-acesso-btn" onclick="abreCadastro()">Primeiro Acesso ?</button>
                <button id="cadastrar-novo-btn">Cadastre-se</button>

                <div class="s-modal-wrap" id="modal-info-cadastro" style="background-image: url(images/parallax/home/1.jpg); background-repeat: no-repeat;background-size: cover; display: none;">
                    <div class="s-modal-content">
                        <h3>No MEU CONDOMÍNIO Você terá acesso a:</h3>
                        <ul>
                            <li>Portal do Condomínio 24 horas</li>
                            <li>Emissão de Boletos Bancários atualizados para Impressão e   pagamento da cota condominial.</li>
                            <li>Visualização de cotas condominiais Pendentes</li>
                            <li>Avisos e Comunicados</li>
                            <li>Acesso a Atas de Assembléia | Convenção | Regimento Interno</li>
                            <li>Agenda e Reserva de Espaços</li>
                        </ul>
                        <button><i class="fa fa-arrow-circle-left fa-lg" aria-hidden="true"></i> Voltar</button>
                    </div>
                </div>
                <div class="s-modal-wrap" id="modal-cadastro">
                    <div class="s-modal-content" style="background-image: url(images/parallax/home/1.jpg); background-repeat: no-repeat;background-size: cover; display: none;">
                        <h3>No MEU CONDOMÍNIO Você terá acesso a:</h3>
                        <form>
                            <input type="text" name="nome" required placeholder="Nome" class="form-control input-lg not-dark required email">
                            <input type="text" name="nome-condominio" required placeholder="Condomínio" class="form-control input-lg not-dark required email" style="margin-top: 10px; margin-bottom: 10px;">
                            <input type="password" name="senha" required placeholder="Senha" class="form-control input-lg not-dark required email">
                            <input type="password" name="confirma-senha" required placeholder="Confirme sua senha" class="form-control input-lg not-dark required email" style="margin-top: 10px; margin-bottom: 10px;">
                            <input type="email" name="email" required placeholder="E-mail" class="form-control input-lg not-dark required email">
                            <input type="email" name="confirma-email" required placeholder="Confirme seu E-mail" class="form-control input-lg not-dark required email" style="margin-top: 10px; margin-bottom: 10px;">
                            <button type="submit" class="button button-rounded button-border button-light noleftmargin">Cadastrar</button>
                        </form>
                        <button><i class="fa fa-arrow-circle-left fa-lg" aria-hidden="true"></i> Voltar</button>
                    </div>
                </div>
            </div>

I’d be very grateful if someone could help me

Answer 1

Buddy, take a look at this fiddle:

https://jsfiddle.net/lossantis/2e1sfkge/10/

I made some changes to your html, because the two modals were with css in tags with different classes.