modal

Modal

Modal (pogovorno okno) je element uporabniškega vmesnika, ki se prikaže na vrhu trenutnega zaslona in zahteva interakcijo uporabnika. Modalna okna so pogosto uporabljena za prikaz pomembnih informacij ali za zahtevanje potrditve določenih dejanj, preden uporabnik nadaljuje z uporabo spletne strani ali aplikacije.

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>modal</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

.modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.7);
            z-index: 100;
        }

.modal-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 12px;
            width: 85%;
            height: 85%;
            padding: 20px;
            z-index: 900;
            background: white;
            border: 1px solid black;
        }

.modal-content {
            display: block;
            background: #ffffff;
            width: 100%;
            height: 100%;
            padding: 20px;
            overflow-x: hidden;
            overflow-y: auto;
            z-index: 400;
            overscroll-behavior: contain;
        }

.modal-content img {
            width: 20%;
            height: auto;
        }

.modal-button {
            display: block;
            background: linear-gradient(45deg, #e5e5e5, #ffffff, #e5e5e5);
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 6px;
            padding: 10px;
            margin: 10px;
        }
        .modal-button:hover {
            transition: 0.8s;
            border: 1px solid transparent;
            border-radius: 6px;
            background: linear-gradient(45deg, #ffffff, #e5e5e5, #ffffff);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 2px 0 4px rgba(0, 0, 0, 0.4);
        }

.open { display: block; }

@media screen and (max-width: 1280px) {  .modal-content img { width: 50%; height: auto; }  }
        @media screen and (max-width: 820px) {  .modal-content img { width: 100%; height: auto; }  }
    </style>
</head>
<body>
<div class="modal" id="modal1">
    <div class="modal-container">
        <div class="modal-content">
            <p>DEMO 01</p>
        </div>
    </div>
</div>

<button class="modal-button" data-target="modal1" data-toggle="modal">MODAL 01</button>

<div class="modal" id="modal2">
    <div class="modal-container">
        <div class="modal-content">
            <h3>What is Lorem Ipsum?</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
                into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the
                release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
                software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <img src="/img/smiley.png" alt="smiley">
        </div>
    </div>
</div>

<button class="modal-button" data-target="modal2" data-toggle="modal">MODAL 02</button>

<button class="modal-button" data-target="modal3" data-toggle="modal">MODAL 03</button>

// close the modal by clicking outside the modal-container
        if (target.classList.contains('modal')) {
            misc_modal = document.querySelector('[class="modal open"]');
            misc_modal.classList.remove('open');
            document.body.style.overflow = "auto";
            e.preventDefault();
        }}, false);
</script>
</body>
</html>