Custom Prompts and Alerts

Question

Custom Prompts and Alerts

Navigation

#1 by (2 votes)

0

Good evening guys,

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

I need to make use of custom prompts and prompts. I wanted to customize everything: texts, number of buttons and colors. All this to set 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 not change the color of buttons, text and the background of alert and prompt.

I wanted to know if you have a way to resolve this. It does not have to be very complex, just make these dialog boxes, as the JavaScript itself does, but with the option to change the color, because without that the color of them disttoa of the standard color of the APP.

I've looked at some of JQuery's things, but the ones I saw were cool in design, with nice functions, but I could not change the color of what I wanted.

javascript html css apache-cordova

asked by anonymous 23.02.2016 / 22:30

1 answer

Install wordpress plugin on local machine Transactional control in context of exception handling using Demoiselle

score 2 · Accepted Answer

How about creating your own Alert? In my projects I use both the Corogeno Dialogs plugins and custom Popups. I think it's the best option, not to rely on libs and so on. See:

Goal:

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

Result:

Now just customize it any way you want. You can hide buttons, change colors and styles, and so on.

Good luck!