Wednesday, August 02, 2017

CSS Popup Sample

Here's some code I wrote for something I'm doing for work.

This code will show and hide a popup

<html>
    <head>
        <style>
            #pop {
                height: 200px;
                width: 200px;
                position: fixed;
                bottom: 50%;
                right: 50%;
                border: 2px solid;
                padding: 10px;
                background: white;
                display: none;
            }
            #buttonsOnPop {
                position: absolute; 
                right: 0; 
                bottom: 0;
                margin: 5px;
            }
            #popTitle {
                vertical-align: top;
                text-align: center;
                width: 100%;
                background-color: limegreen;
            }
        </style>
        <script>
            function closePopYes() {
                alert("yes");
            }
            function closePopNo() {
                document.getElementById("pop").style.display='none';
            }
            function showPop() {
                var text = "<p>To be or not to be</p><p>Revente</p>";
                var popContent = document.getElementById("popContent");
                popContent.innerHTML = text;
                document.getElementById("pop").style.display='block';
            }
        </script>
    </head>
    <body>
        <div id="pop">
            <div id="popTitle">Pop Window</div>
            <div id="popContent">
            </div>
            <div id="buttonsOnPop">
            <button id="yes" onclick="closePopYes();">Yes</button>
            <button id="no" onclick="closePopNo();">No</button>
            </div>
        </div>
        <button id="showPop" onclick="showPop()">Show Pop</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae iaculis enim. Vivamus a 
tellus sit amet tortor mattis auctor at eget purus. Fusce condimentum semper varius. Integer 
ultricies enim et ipsum scelerisque, dignissim ultricies metus molestie. Quisque rutrum, sem id 
vehicula malesuada, orci purus malesuada dolor, id vehicula nulla nisi sed dui. Donec at eros 
vestibulum, euismod mi quis, rhoncus justo. Curabitur quis metus sit amet erat efficitur pellentesque. 
Nunc dui massa, efficitur ac dapibus ut, interdum vel metus. Nunc mattis eleifend nisl, id rhoncus 
erat cursus et. Nullam semper, risus sed feugiat elementum, turpis lacus egestas nisi, quis bibendum 
lorem turpis eu purus. Etiam nec lorem tristique, condimentum ligula ac, mattis erat. Proin aliquet 
quis lectus eu hendrerit. Curabitur vitae laoreet nulla. Pellentesque imperdiet odio id urna imperdiet 
bibendum eget non erat.
</p>

    </body>
</html>

No comments: