Create dialog boxes within the page

Asked

Viewed 196 times

2

I’m looking to create a kind of notification system that shows some messages in dialog boxes using pure javascript and css. The problem I’m facing is that I can’t display multiple boxes and dialog, just one at a time.

Note: I hope you can understand the code, I know these languages.

 function mostrarNotificacao(cabecalho,conteudo){
                var x=document.getElementById("janela-base");
                var titulo=document.getElementById("titulo");
                var corpo=document.getElementById("corpo");
                corpo.innerHTML = conteudo;
                titulo.innerHTML = cabecalho;
                x.classList.remove("fechar");
                x.classList.add("visivel");
                setTimeout(function(){
                x.classList.remove("visivel");
            },10000);
            }
            function fechar(){
                var x=document.getElementById("janela-base");
                x.classList.remove("visivel");
                x.classList.add("fechar");
            }
* {-webkit-font-smoothing: antialiased;
                     -moz-osx-font-smoothing: grayscale;
                     text-shadow: rgba(0,0,0,.01) 0 0 1px;}
                    #janela-base{
                        position:fixed;
                        margin-left:88%;
                        top:0;
                        z-index: 1;
                        transform:translate(-50%);
                        min-width: 200px;
                        max-width: 300px;
                        min-height:90px;
                        max-height:400px;
                        box-shadow: 0px 0px 10px 0.2px;
                        border-radius:10px;
                        visibility: hidden;
                        word-wrap:break-word;
                        opacity: 0;
                        
                    }
                    .janela-titulo{
                        background-color:#6a7996;
                        width:100%;
                        max-width: 295px;
                        min-height: 30px;
                        max-height:30px;
                        border-top-left-radius: 10px;
                        border-top-right-radius: 10px;
                        padding-left: 6px;
                        padding-right:1px;
                        font-family: arial;
                        line-height: 30px;
                        font-weight:700;
                    }
                    .janela-corpo{
                        background-color:#93b4ee;
                        min-height:90px;
                        max-height: 400px;
                        width:296px;
                        border-bottom-left-radius: 10px;
                        border-bottom-right-radius: 10px;
                        padding-left: 1px;
                        padding-right:1px;
                        font-family: arial;
                        padding-left:3px;
                        padding-bottom:3px;
                        padding-right:3px;
                        
                    }
                    #corpo{
                    width:100%;
                    }
                    #janela-base.visivel{
                        visibility: visible;
                        animation: fadeInOut 10s;
                    }
                    #janela-base.fechar{
                        visibility:hidden;
                    }
                    @keyframes fadeInOut{
                        5%,95%{opacity:1;top:50px}
                        15%,85%{opacity:1;top:30px}
                    }
                    #btn-fechar{
                        position:absolute;
                        width:55px;
                        height:20px;
                        top:95px;
                        right:6px;
                        bottom:12px;
                        border-style: solid;
                        border-radius:3px;
                        color:#596e91;
                        border-color: #596e91;
                        background-color:rgba(0,0,0,.01);
<button onclick="mostrarNotificacao('cabecalho','conteudo')">teste</button>
             
             <!--   Janela de notificacão -->
            
            <div id="janela-base">
                <div class="janela-titulo">
                <span id="titulo"></span>
                </div>
                <div class="janela-corpo">
                    <div id="corpo"></div>
                    <button id="btn-fechar" onclick="fechar()">fechar</button>
                </div>

            </div>

javascript html css

  • What do you mean multiple boxes? You want to have how many btns to call these boxes? Is it for one going out when the other goes in or is it for getting one over the other? You need to give more details

  • 1

    Create with just one btn (but it will not be triggered by button when I implement in the project). It is to exit one below the other.

1 answer

1


You will need to improve the css and the placement of notifications but the way I did it already creates more than one and then deleta when the timer ends. make tests and modifications and you will get the desired result.

function mostrarNotificacao(cabecalho,conteudo){
                var content = '<div class="janela-base">'+
                  '<div class="janela-titulo">'+
                  '<span id="titulo">'+cabecalho+'</span>'+
                  '</div>'+
                  '<div class="janela-corpo">'+
                      '<div id="corpo">'+conteudo+'</div>'+
                      '<button id="btn-fechar" onclick="fechar()">fechar</button>'+
                  '</div>'+
                  '</div>';
                
                $('.conteudo').append(content);
                $('.janela-base').addClass('visivel').removeClass('fechar');
                setTimeout(function(){
                  $('.janela-base').first().remove();
                },10000);
            }
            function fechar(){
                var x=document.getElementById("janela-base");
                x.classList.remove("visivel");
                x.classList.add("fechar");
            }
* {-webkit-font-smoothing: antialiased;
                     -moz-osx-font-smoothing: grayscale;
                     text-shadow: rgba(0,0,0,.01) 0 0 1px;}
                    .janela-base{
                        position:fixed;
                        margin-left:88%;
                        top:0;
                        z-index: 1;
                        transform:translate(-50%);
                        min-width: 200px;
                        max-width: 300px;
                        min-height:90px;
                        max-height:400px;
                        box-shadow: 0px 0px 10px 0.2px;
                        border-radius:10px;
                        visibility: hidden;
                        word-wrap:break-word;
                        opacity: 0;
                        
                    }
                    .janela-titulo{
                        background-color:#6a7996;
                        width:100%;
                        max-width: 295px;
                        min-height: 30px;
                        max-height:30px;
                        border-top-left-radius: 10px;
                        border-top-right-radius: 10px;
                        padding-left: 6px;
                        padding-right:1px;
                        font-family: arial;
                        line-height: 30px;
                        font-weight:700;
                    }
                    .janela-corpo{
                        background-color:#93b4ee;
                        min-height:90px;
                        max-height: 400px;
                        width:296px;
                        border-bottom-left-radius: 10px;
                        border-bottom-right-radius: 10px;
                        padding-left: 1px;
                        padding-right:1px;
                        font-family: arial;
                        padding-left:3px;
                        padding-bottom:3px;
                        padding-right:3px;
                        
                    }
                    #corpo{
                    width:100%;
                    }
                    .janela-base.visivel{
                        visibility: visible;
                        animation: fadeInOut 10s;
                    }
                    .janela-base.fechar{
                        visibility:hidden;
                    }
                    @keyframes fadeInOut{
                        5%,95%{opacity:1;top:50px}
                        15%,85%{opacity:1;top:30px}
                    }
                    #btn-fechar{
                        position:absolute;
                        width:55px;
                        height:20px;
                        top:95px;
                        right:6px;
                        bottom:12px;
                        border-style: solid;
                        border-radius:3px;
                        color:#596e91;
                        border-color: #596e91;
                        background-color:rgba(0,0,0,.01);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="mostrarNotificacao('cabecalho','conteudo')">teste</button>
             
             <!--   Janela de notificacão -->
            <div class="conteudo">
              
            </div>

  • 1

    Thank you Lodi! Now I just need to edit the CSS to fix the aesthetic, vlw msm.

Browser other questions tagged javascript html css

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