1

Boa noite pessoal,

Estou trabalhando com o Apache Cordova, que basicamente usa linguagem WEB (html, css, javascript...) para fazer aplicativos Android, iOS, entre outros.

Estou precisando fazer uso de alerts e prompts personalizados. Queria personalizar tudo: textos, quantidade de botões e cores. Tudo isso para estabelecer um padrão.

O Apache Cordova tem um API que se chama 'dialogs'. Ele é bom, consigo modificar quase tudo que quero, o único problema é que não consigo mudar a cor de botões, do texto e o background do alert e prompt.

Queria saber se tem uma maneira de resolver isso. Não precisa ser nada muito complexo, somente fazer essas caixas de diálogos, como o próprio JavaScript faz, mas com opção de mudar a cor, porque sem isso a cor deles distoa da cor padrão do APP.

Já dei uma olhada em algumas coisas de JQuery, mas os que vi tinha um design legal, com funções legais, mas eu não conseguia mudar a cor do que queria.

1 Resposta 1

2

Que tal criar seu próprio Alert? Em meus projetos eu utilizo tanto os plugins Dialogs do Cordova quanto Popups personalizados. Acho que é a melhor opção, para não ficar dependendo de libs e etc. Veja só:

Meta:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"/>

Styles:

<link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
<style>
.dialogDiv{
    top: 200px; /*Distância fixa do topo da tela*/
    left: 0;
    right: 0;
    width: 270px; /*Tamanho máximo do popup*/
    margin-left: auto; /*margins laterais com AUTO indicam que o Popup ficará alinhado no meio da tela horizontalmente*/
    margin-right: auto;
    position: fixed; /*Terá uma posição fixa na tela, independentemente da rolagem*/
    z-index: 1000; /*Deve ser o element mais à frente na página*/
    display: none; /*Por default, o popup está escondido*/
}
.dialogSubDiv{
    width: 270px; 
    padding: 0px;
    margin: 0px;
    text-align:justify;
    background: #808080;
    border-radius: 3px;
}
.dialogHeader{
    height: 25%;
}
.dialogCloseText {
    font-size: 30pt; 
    color: white;
}
.dialogTextDiv{
    background: #ccc; 
    height: 50%; 
    position: relative;
}
.dialogTextTitle{
    text-align:center; 
    padding-top: 5px; 
    color: #808080;
}
.dialogText{
    padding-left: 5px; 
    padding-right: 5px; 
    font-size:10pt; 
    text-align: justify; 
}
.dialogButtons{
    text-align: center;
    padding: 5px;
    height: 25%;
}
</style>

HTML:

<body>

<button type="button" class="btn btn-primary" onclick="ajuda()">Mensagem Ajuda</button>

<div id="popupDiv" class="dialogDiv">
    <div id="popupSubDiv" class="dialogSubDiv">
        <div class="dialogHeader">
            <button type="button" class="close" aria-hidden="true" onclick="fecharPopup()">
                <span class="dialogCloseText" aria-hidden="true">&times;</span>
            </button>
            <h4 id="popupTitle" class="dialogTextTitle"></h4>
        </div>
        <div class="dialogTextDiv">
            <p id="popupText" class="dialogText"></p>
        </div>
        <div class="dialogButtons">
            <button id="btn1" type="button" class="btn btn-default"></button>
            <button id="btn2" type="button" class="btn btn-primary"></button>
        </div>
    </div>
</div>
</body>

JS:

function ajuda (){
    document.getElementById("popupSubDiv").style.background = "#320049"; //Cor do popup

    document.getElementById("popupTitle").innerHTML = "AJUDA"; //Título
    document.getElementById("popupText").innerHTML = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."; //Texto

    document.getElementById("btn1").innerHTML = "Enviar ajuda";//Botão1
    document.getElementById("btn2").innerHTML = "Cancelar";//Botão2

    document.getElementById("popupDiv").style.display = "block";//Mostrando o Popup
}

function fecharPopup (){
    document.getElementById("popupDiv").style.display = "none";
}   

Resultado:

inserir a descrição da imagem aqui

Agora é só personalizar do jeito que você quiser. Você pode esconder botões, alterar cores e estilos e etc.

Boa sorte!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .