Creating Multiple Modals on a Single Page

Question

I\'m having some issues creating multiple modals on a single webpage following the sample code from w3schools.com. The code in question that I am using is this one: http://w

Answer 1

Why are you using so much code, and javascript to do something you can do using just CSS and HTML? (simplified example, animations and such can of course be added)

[id^=modal] {
  display: none;
  border: 1px solid red;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  min-height: 3em;
  min-width: 5em;
  max-width: 10em;
  }
input[type=checkbox] {
  position: absolute;
  clip: rect(0 0 0 0);
  }
#modal1:target {
  display: block;
  }
#modal2:target {
  display: block;
  }
[id^=modal] a {
  float: right;
  }

    
This is the content-container
    Open first modal

    Open second modal
  
CloseThis is the first modal
  
CloseThis is the second modal