Custom Alerts and Prompts

Question

Custom Alerts and Prompts

Asked 8 years, 10 months ago

Viewed 3,737 times

0

Good evening, everyone,

I’m working with Apache Cordova, which basically uses WEB language (html, css, javascript...) to make Android apps, iOS, among others.

I need to make use of custom Alerts and prompts. I wanted to customize everything: text, number of buttons and colors. All this to establish a standard.

Apache Cordova has an API called 'dialogs'. It is good, I can modify almost everything I want, the only problem is that I can’t change the color of buttons, text and the background of Alert and prompt.

I was wondering if you had a way to handle this. It doesn’t have to be anything very complex, just make these dialog boxes, as Javascript itself does, but with the option to change the color, because without it their color differs from the standard color of the APP.

I already took a look at some things of Jquery, but the ones I saw had a cool design, with cool functions, but I could not change the color of what I wanted.

1 answer

Browser other questions tagged javascript html css apache-cordova

You are not signed in. Login or sign up in order to post.

by Cordovaing • **106** points · Answer 1 · 2016-02-24T16:03:58+00:00

How about creating your own Alert? In my projects I use both Cordova Dialogs plugins and custom popups. I think it is the best option, not to be depending on libs and etc. Look at this:

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";
}

Upshot:

Now just customize it the way you want. You can hide buttons, change colors and styles and etc.

Good luck!