How to add a scrollbar in PopUp with css?

Navigation
0

I have the PopUp below that when I decrease the screen it does not create the scroll bar and it is not possible to see the complete content.

How can I create a scroll bar for when the browser is in a smaller size?

Full Screen - Normal:

SmallScreen-Ilosesomeofthecontent:

Code:

function OcultarDiv() {
            var meuDialogConteudo = document.getElementById("meuDialog");
            meuDialogConteudo.style.display = "none";
        }

        function MostrarDiv() {
            var meuDialogConteudo = document.getElementById("meuDialog");
            meuDialogConteudo.style.display = "block";
        }    
 #meuDialog {            
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0; 
            bottom: 0;
            left: 0; 
            right: 0; 
            background: rgba(0, 0, 0, 0.2);
            padding: 20px;
            overflow-y: auto;
        }

        #meuDialogConteudo {
            position: fixed;
            width: 600px; 
            height: 600px;
            top: 50%;
            margin-top: -300px; 
            left: 50%;
            margin-left: -300px;
            border: 1px double black; 
            background-color: deepskyblue; 
            overflow-y: auto;
        }
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Exemplo - PopUp001</title>
</head>
  
<body>    
      <div id="meuDialog">
            <div id="meuDialogConteudo">
                <input id="meuBotaoOcultar" type="button" onclick="OcultarDiv();" value="X" style="float: right; margin: 6px; background-color: red;" />                  
                <p>
                    Eu sou um popup criado com div e javascript sem usar jQuery.
                </p>                             
            </div>
        </div>

        <input id="meuBotaoMostrar" type="button" onclick="MostrarDiv();" value="Mostrar" style="margin: 6px; background-color: deepskyblue;" />     
</body>
</html>
    
asked by anonymous 30.11.2016 / 14:18

3 answers

1

This scroll bar "is not working" because you left the fixed position and set a margin at the top.

My suggestion is to create a media to change this style when the screen shrinks.

These socks are used to make the site responsive, within them you will adapt your style. 

@media (max-width: 800px), (max-height: 600px) {

  #meuDialogConteudo {
    position: absolute;
    margin-top: -200px; 
  }  

}

See not working on JsFiddle .

    
30.11.2016 / 14:50
0

Use the overflow: auto attribute, this will cause a scrollbar to appear as soon as the height or width of the div exceeds the defined height or width.

    
30.11.2016 / 14:20
0

Only use overflow: auto , which scroll appears.

    
30.11.2016 / 14:23
Run script after 20 seconds PHP PDO Notify user whose registration name already exists