Javascript Popups / Modes

Well, I've been trying for 2 days to do the following:

• When you click on the register button, open the registration mode, when clicking the information button, open it
• When you click to go back, both will receive display none
• When you click outside of them, both will receive display none

Login

                <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 would be very grateful if anyone could help me