404

D7net
:/ var / www / html / idoso /
Filename : botaoajuda.php.bak
back
<!DOCTYPE html>
<html>
<head>
    <title>Exemplo de Ajuda em Campo Específico</title>
    <style>
        /* Estilos para o modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }

        .modal-content {
            background-color: #fff;
            margin: 10% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        .help-icon {
            font-size: 20px;
            cursor: pointer;
            display: inline-block;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: #007bff; /* Cor de fundo */
            color: #fff; /* Cor do ícone */
            border-radius: 50%; /* Borda arredondada para criar um círculo */
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <h1>Formulário de Contato</h1>
    <form action="processar.php" method="post">
        <label for="nome">Nome:</label>
        <input type="text" name="nome" id="nome" required>
        <span class="help-icon" onclick="showHelp('nome')">?</span>
        <br><br>
        <label for="email">E-mail:</label>
        <input type="email" name="email" id="email" required>
        <span class="help-icon" onclick="showHelp('email')">?</span>
        <br><br>
        <label for="mensagem">Mensagem:</label>
        <textarea name="mensagem" id="mensagem" rows="4" cols="50" required></textarea>
        <span class="help-icon" onclick="showHelp('mensagem')">?</span>
        <br><br>
        <button type="submit">Enviar</button>
    </form>

    <!-- Modal de Ajuda -->
    <div id="ajudaModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeHelp()">&times;</span>
            <div id="ajudaConteudo">
                <!-- Conteúdo da ajuda será inserido aqui -->
            </div>
        </div>
    </div>

    <script>
        // Função para exibir o modal de ajuda com o conteúdo apropriado
        function showHelp(campo) {
            var modal = document.getElementById("ajudaModal");
            var conteudoAjuda = document.getElementById("ajudaConteudo");

            // Defina o conteúdo da ajuda com base no campo específico
            switch (campo) {
                case "nome":
                    conteudoAjuda.innerHTML = "Preencha seu nome completo.";
                    break;
                case "email":
                    conteudoAjuda.innerHTML = "Informe um endereço de e-mail válido.";
                    break;
                case "mensagem":
                    conteudoAjuda.innerHTML = "Digite sua mensagem aqui.";
                    break;
                default:
                    conteudoAjuda.innerHTML = "Ajuda não disponível para este campo.";
                    break;
            }

            modal.style.display = "block";
        }

        // Função para fechar o modal de ajuda
        function closeHelp() {
            var modal = document.getElementById("ajudaModal");
            modal.style.display = "none";
        }
    </script>
</body>
</html>