x-yuri/popup.md

## popup.md

      
    Raw
  

              popup.md
            
          
    popup

<!doctype html>
<html>
<head>
    <style>
        body {
            margin: 0;
        }
        .no-scrollbars {
            overflow: hidden;
        }
        a.open,
        a.close {
            position: fixed;
            top: 10px;
            padding: 5px 20px;
            cursor: pointer;
        }
        a.open {
            left: 10px;
            color: white;
            background: black;
        }
        a.close {
            right: 10px;
            background: white;
        }
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.3;
            background: black;
        }
    </style>
</head>
<body>
    <a class="open">open</a>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur est diam, varius quis pellentesque id, gravida id mauris. Sed dignissim nunc in ligula accumsan ultrices. Suspendisse faucibus dolor ac odio bibendum, ac volutpat justo sodales. Nunc iaculis ac risus quis tincidunt. Duis vulputate viverra mauris sed cursus. Phasellus nec eros sed urna condimentum placerat id pellentesque enim. Suspendisse nec auctor orci. Fusce nibh lectus, posuere quis condimentum sit amet, posuere et enim. Aenean quis efficitur libero. Quisque augue dui, placerat eget felis sit amet, interdum lobortis magna. Suspendisse auctor sed justo eu consectetur. Cras porta, nisi eget tincidunt tempus, urna dui volutpat dui, ac tincidunt libero enim non turpis. Phasellus ut velit at felis faucibus rhoncus. Morbi finibus libero leo. Fusce interdum, est et tristique eleifend, nisl lectus rhoncus ipsum, rutrum commodo ante diam quis massa. Suspendisse semper tempus tellus sed mattis.

    <p>Aenean varius leo ac purus fermentum posuere sit amet vel nulla. Curabitur malesuada ipsum turpis, eget posuere dui lobortis nec. Nulla consectetur, dolor vitae volutpat pharetra, orci dolor dapibus arcu, a tristique mauris lorem vitae ex. Suspendisse eleifend nibh enim, quis laoreet nisi ullamcorper in. Ut pharetra purus id felis auctor posuere. Curabitur vitae magna luctus, rutrum nibh eget, tincidunt augue. Suspendisse rutrum, lorem eget dictum sollicitudin, lorem nunc tristique urna, id ullamcorper mauris velit eget dolor.

    <img src="https://placehold.co/600x400">

    <p>Maecenas tempor rhoncus tellus a convallis. Sed quis orci lectus. Mauris non tincidunt ex. Sed varius ante id lorem feugiat, nec bibendum ante lacinia. Vivamus mollis neque quis felis pharetra placerat. Pellentesque ut mauris condimentum, fermentum nisi at, hendrerit arcu. Sed consectetur augue ultricies venenatis varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eu lorem lacinia, cursus dui id, pulvinar nisi. Donec at dictum ligula, quis ultrices sem. Aliquam erat volutpat. Ut porta pretium massa. In sed iaculis ante. Proin et libero nulla.

    <p>Pellentesque faucibus est id sapien maximus, in pellentesque ipsum imperdiet. Curabitur quis lacus erat. Sed rhoncus bibendum diam. Suspendisse porta venenatis velit, ut gravida lectus volutpat quis. Maecenas sodales fermentum tempor. Aliquam erat volutpat. Sed vulputate nec dolor a commodo. Fusce facilisis ipsum ac tincidunt luctus. Sed luctus erat et elit vestibulum volutpat. Curabitur ut ex dignissim, dapibus tellus a, molestie libero. Nulla malesuada varius consectetur. In eget velit porta, elementum sapien nec, tincidunt dui. Sed mollis sed urna suscipit ultrices. Sed ut nisi malesuada, rhoncus nisl non, condimentum enim.

    <p>Ut sodales fringilla facilisis. Proin ornare odio ut lacus scelerisque, tempus lobortis lectus posuere. Aenean eros felis, tempor sit amet magna eu, dictum pulvinar sem. Proin et auctor lacus. Proin sit amet finibus diam. Nullam gravida sagittis orci, vel rutrum mi ullamcorper in. Pellentesque a vehicula tellus. Mauris posuere nulla lorem, finibus cursus ante suscipit et. Nunc vitae ultricies elit. Cras diam est, dignissim ut magna vel, eleifend lobortis ante. Fusce mollis elementum faucibus. In leo turpis, auctor vel lorem eget, tempus rhoncus justo.

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus bibendum tortor cursus malesuada. Donec malesuada porttitor sem vitae blandit. Quisque ac arcu condimentum, venenatis libero non, ultricies enim. Vestibulum consectetur urna metus, id pulvinar libero fermentum eget. In porta sem sed augue consequat, id sollicitudin tortor facilisis. Maecenas sed turpis augue. In nec nunc vel eros vehicula rutrum. Nulla faucibus ex arcu. Nunc hendrerit, erat sit amet bibendum pharetra, nisl arcu vulputate odio, vel rutrum risus mi non augue. Sed vel finibus velit, quis euismod quam. Aliquam neque arcu, blandit eget nibh non, sodales euismod risus. Cras in dui pharetra ex blandit tincidunt sit amet sed quam. In fringilla vestibulum ultricies. Integer neque magna, laoreet sit amet purus id, blandit lobortis enim. Suspendisse potenti.

    <p>Cras ac consectetur mauris, quis cursus lorem. Aliquam erat volutpat. Nam ut diam sollicitudin, semper leo vel, egestas lectus. Morbi suscipit, justo et lacinia ultrices, ligula odio suscipit nisl, non tempor risus ipsum nec arcu. Mauris ultrices varius orci at fringilla. Sed blandit eros augue, non sodales massa laoreet in. Mauris at odio ut nisi vulputate accumsan sit amet at diam. Proin rutrum nibh mi, vitae imperdiet libero iaculis ac. Vestibulum in diam justo. Curabitur sit amet urna vitae orci pretium sollicitudin at a metus. Donec mattis viverra libero, ut vehicula mauris cursus vitae.

    <p>Nullam consequat rhoncus felis, at vulputate libero lacinia et. Maecenas justo risus, ullamcorper at tortor quis, tempus cursus ex. Cras cursus felis neque, ac semper odio dictum a. In id mi fermentum, pellentesque nibh ac, sollicitudin orci. Praesent quis risus ullamcorper, interdum mi imperdiet, maximus diam. Pellentesque congue finibus ipsum, eu viverra purus sollicitudin ut. Maecenas augue sapien, sodales at condimentum id, volutpat at tortor. Ut sagittis consectetur dui eu rhoncus. Pellentesque non lorem non massa egestas lacinia. Sed imperdiet sapien vel sem elementum faucibus. Nulla lorem orci, gravida condimentum mi vel, consequat commodo leo. Integer porta tristique ornare. Sed quis lorem in orci venenatis faucibus sed a purus.

    <p>Mauris luctus et nulla at volutpat. Suspendisse ut magna egestas, mattis urna in, aliquet nisl. Suspendisse gravida imperdiet libero et vestibulum. Fusce ipsum nulla, sollicitudin non tempus feugiat, consequat id magna. Ut tincidunt sodales arcu in posuere. Nunc scelerisque, dolor interdum dictum dapibus, orci est aliquam mi, eu efficitur erat nunc id quam. Pellentesque placerat neque ante, sit amet tempor justo maximus sed. Cras nec odio ut mi ullamcorper vulputate. Curabitur in velit dictum, volutpat arcu vitae, lobortis nunc. Aenean efficitur, mi laoreet bibendum luctus, dui justo pharetra leo, sed tincidunt tortor libero id sem. Suspendisse sodales pharetra fermentum. Pellentesque eu tortor tempor, commodo mi sit amet, vehicula sem. Morbi sit amet ante nunc. Aliquam erat volutpat. Nunc nisl sapien, dapibus congue felis sit amet, lobortis laoreet felis.

    <p>Maecenas non ipsum pellentesque, sodales ex eu, vehicula ante. Pellentesque vitae dignissim elit, placerat suscipit est. Integer odio mi, egestas vitae lorem sed, suscipit auctor nunc. Integer leo arcu, malesuada vel gravida nec, finibus consectetur ex. Etiam dignissim, magna lacinia tempor facilisis, diam ipsum laoreet nibh, a sagittis sem lacus id mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec convallis, felis sed elementum volutpat, eros risus pharetra urna, ut sollicitudin nibh lorem non lacus. Phasellus ultrices tortor sed metus iaculis, at aliquam ante pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse sodales massa velit, id scelerisque sapien consectetur a. Nulla in augue quis orci facilisis fringilla. Mauris nibh est, sodales sed ullamcorper eu, fermentum eget tellus. Suspendisse bibendum interdum aliquet. Maecenas nec nisi fringilla, aliquet erat molestie, iaculis ipsum.

    <p>Nam sed diam velit. Phasellus sit amet risus venenatis, consectetur velit nec, egestas enim. In hac habitasse platea dictumst. Duis venenatis ornare felis id hendrerit. Nunc justo diam, tempus sed nulla gravida, sodales vehicula nunc. Duis semper commodo orci, eu scelerisque justo maximus sed. Quisque molestie rhoncus nunc, vel dictum velit fermentum at. In ut elementum est, ac bibendum sem.

    <p>Vivamus tincidunt ullamcorper sapien consequat pharetra. Vivamus at sapien non dui tincidunt rhoncus non eu massa. Morbi eget nulla sodales, auctor lacus ac, porttitor mauris. Sed nec augue viverra, sagittis leo ac, lacinia libero. Aliquam ac turpis vitae elit posuere ornare quis et leo. Curabitur tincidunt, eros ac iaculis vehicula, nisl mi laoreet metus, ut tempus risus velit quis sem. Morbi imperdiet tempor risus, ac posuere arcu tempus sit amet. Nunc aliquam, tortor sed dapibus vehicula, lorem ligula volutpat velit, nec tempor neque leo in nibh. Phasellus eros nisi, tincidunt et neque vel, pulvinar convallis ipsum.

    <p>Morbi faucibus nec dolor facilisis sagittis. Phasellus efficitur, lectus vitae vulputate tempus, dui massa sodales felis, ut consequat enim sem ut odio. Sed quis diam diam. Sed ornare purus interdum massa blandit venenatis. Vestibulum eget felis eu nunc posuere mattis. Cras euismod posuere diam, ut pretium lacus facilisis ut. Vivamus elementum lorem lobortis felis fringilla, at accumsan purus aliquam. Ut sed ex porttitor urna imperdiet tristique quis at risus. Morbi eu ex sapien. Pellentesque orci velit, tristique in lorem in, fringilla condimentum sem. Aenean placerat, neque eget bibendum lacinia, dui tellus feugiat ipsum, ut placerat nisi eros id quam.

    <p>Nullam bibendum porttitor mi, rutrum congue leo. Mauris enim est, laoreet eu accumsan nec, mollis et felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque vehicula auctor tempus. Quisque venenatis massa ac pulvinar rutrum. Pellentesque sagittis magna vitae tellus suscipit dapibus. Quisque sit amet quam ut enim consectetur porta. Aenean quis libero neque. Vivamus mollis nisi luctus enim pretium rutrum. Suspendisse sit amet justo vitae justo commodo lacinia ut eu leo.

    <p>Aenean libero sem, tincidunt feugiat ante non, semper lacinia sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce eget ante rutrum, lacinia nunc vestibulum, lacinia risus. Cras ut velit ac augue pulvinar ullamcorper. Duis tristique vestibulum enim ut aliquam. Vestibulum rutrum sit amet augue a fringilla. Nunc cursus ut nisl vel feugiat. Cras varius eget est ut blandit. Fusce vitae facilisis est. Integer eu placerat neque, porttitor dapibus libero. Etiam eget lectus velit. Cras a libero eget nulla pretium congue non vitae leo. Suspendisse volutpat lectus non metus tristique mollis. Phasellus facilisis tempor odio, vitae congue nisl. Sed at velit sollicitudin augue pretium laoreet.

    <script>
        document.querySelector('a').addEventListener('click', e => {
            document.body.style.width = document.body.clientWidth + 'px';
            document.body.classList.add('no-scrollbars');

            const overlay = document.createElement('div');
            overlay.className = 'overlay';
            document.body.appendChild(overlay);

            const a = document.createElement('a');
            a.className = 'close';
            a.innerHTML = 'close';
            a.addEventListener('click', e => {
                a.remove();
                overlay.remove();
                document.body.classList.remove('no-scrollbars');
                document.body.style.width = '';
            });
            document.body.appendChild(a);
        });
    </script>
</body>
</html>