Scribd Logo
Upload

Welcome to Scribd!

  • 018 - Documentos Google

    Uploaded by

    sharking789
    5 views2 pages
    This tutorial explains how to create a pure CSS modal window without using any JavaScript. It provides the HTML and CSS code to create a modal that opens when a link is clicked and includes styling for the overlay and modal content window. Instructions are also given to include a close link and example content is demonstrated within the modal.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This tutorial explains how to create a pure CSS modal window without using any JavaScript. It provides the HTML and CSS code to create a modal that opens when a link is clicked and includes styling for the overlay and modal content window. Instructions are also given to include a close link and example content is demonstrated within the modal.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views2 pages

    018 - Documentos Google

    Uploaded by

    sharking789
    This tutorial explains how to create a pure CSS modal window without using any JavaScript. It provides the HTML and CSS code to create a modal that opens when a link is clicked and includes styling for the overlay and modal content window. Instructions are also given to include a close link and example content is demonstrated within the modal.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    Thank you for taking an interest in my YouTube channel.

    If you find this code useful please give me a ‘like’ on YouTube and subscribe to my channel.

    Click this link for a list of my Web development tutorials,

    https://docs.google.com/spreadsheets/d/1mtcq8BiRELaC4IVwRvEpOJs8FKA2lLqxAUd7XU
    Xv9Ew/edit?usp=sharing

    How to create a pure css modal window

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>CSS Modal Example</title>
    <style>
    #container{
    margin:0 auto;
    width:80%;
    font-family: verdana,arial,sans-serif;
    font-size:16px;
    }
    #modalWindow {
    position: fixed;
    font-family: arial,helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99999;
    opacity:0;
    transition: opacity 400ms linear;
    pointer-events: none;
    }
    #modalWindow:target {
    opacity:1;
    pointer-events: auto;
    }
    #modalWindow > div {
    width: 400px;
    height: 240px;
    position: relative;
    margin: 10% auto;
    padding: 20px 20px 13px 20px;
    border: solid;
    border-color: black;
    border-width : 2px;
    background: #DAF7A6;
    border-radius: 10px;
    }
    </style>
    </head>

    <body>

    <h1>CSS Modal Example</h1>


    <a href="#modalWindow">Open modal</a>
    <div id="container">
    <p>
    This is the main page.
    </p>
    </div>

    <div id="modalWindow">
    <div>
    <a href="#close">Close modal</a><br>
    <p>
    This is the modal. Put any text or controls here.
    <br><br>
    <button type="button">Just a button for display purposes only!</button>
    </p>
    </div>
    </div>

    </body>

    </html>

    You might also like