Make modal without Javascript

Asked 25/2, 2019 at 18:0 Answered 18/10 at 0:45

How to make modal without javascript code with just html and css?

I have a project that I can't use javascript and I need modal.

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
  <h2>W3.CSS Modal</h2>
  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal</button>

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p>
      </div>
    </div>
  </div>
</div>

</body>
</html>

Schaerbeek answered 25/2, 2019 at 18:0 Comment(1)

You are already using javascript. document.getElementById is a javascript call – Calliper 25/2, 2019 at 19:51

as very very simple like this

* {
  font-family:"Segoe UI",sans-serif;
}

input[type='checkbox']{
  display:none;
}

#btn {
  padding:5px 10px;
  background: yellowgreen;
  color:#fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform:translate(-50%,-50%);
}

#cnt {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: hotpink;
  top: 0;
  left: 0;
  display:flex;
  align-items:center;
  justify-content: center;
  pointer-events:none;
  display:none;
}

.close {
  position: fixed;
  top: 20px;
  right: 20px;
  display:none;
  cursor:pointer;
}

input:checked + div + #cnt {
  display:flex;
}

input:checked + div + #cnt + .close {
  display:block;
}

<label>
  <input type="checkbox">
  <div id="btn">OPEN</div>
  <div id="cnt">SOME CONTENT</div>
  <div class="close">X</div>
</label>

Crucible answered 25/2, 2019 at 18:11 Comment(0)

Here is another simple solution using CSS :target and anchor links.

dialog { display: block; }

dialog:not(:target):not([open]) { display: none; }

<html>
  <body>
      <p>
        <a href="#dialog">Open dialog</a>
      </p>

      <dialog id="dialog">
        <h2>Dialog</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#!">Close</a>
      </dialog>
  </body>
</html>

Stocky answered 6/2, 2022 at 15:15 Comment(0)

as very very simple like this

* {
  font-family:"Segoe UI",sans-serif;
}

input[type='checkbox']{
  display:none;
}

#btn {
  padding:5px 10px;
  background: yellowgreen;
  color:#fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform:translate(-50%,-50%);
}

#cnt {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: hotpink;
  top: 0;
  left: 0;
  display:flex;
  align-items:center;
  justify-content: center;
  pointer-events:none;
  display:none;
}

.close {
  position: fixed;
  top: 20px;
  right: 20px;
  display:none;
  cursor:pointer;
}

input:checked + div + #cnt {
  display:flex;
}

input:checked + div + #cnt + .close {
  display:block;
}

<label>
  <input type="checkbox">
  <div id="btn">OPEN</div>
  <div id="cnt">SOME CONTENT</div>
  <div class="close">X</div>
</label>

Crucible answered 25/2, 2019 at 18:11 Comment(0)

You can use dialog to create a modal without using JavaScript:

<dialog id="modal">
  <h1>Welcome!</h1>
  <p>Click the "Close" button or press Esc to close the modal</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

<button onclick="modal.show()">Show Modal</button>

Briannabrianne answered 18/10 at 0:45 Comment(0)

Recommended topics

Hot tags