I found this code online, that does exactly what I am looking for, but how do I call the #modal to each hotspot on my image? Right now the modal is called from a link on this page...how to I just make the modal a separate page that I can call with behaviours? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Desi Developer</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-family: sans-serif; } a:link, a:visited{ text-decoration: none; } .modal{ background-color: rgba(0,0,0, .8); width:100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: 10; opacity: 0; visibility: hidden; transition: all .5s; } .modal__content{ width: 75%; height: 65%; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2em; border-radius: 1em; opacity: 0; visibility: hidden; transition: all .5s; } #modal:target{ opacity: 1; visibility: visible; } #modal:target .modal__content{ opacity: 1; visibility: visible; } .modal__close{ color: #363636; font-size: 2em; position: absolute; top: .5em; right: 1em; } .modal__heading{ color: dodgerblue; margin-bottom: 1em; } .modal__paragraph{ line-height: 1.5em; } .modal-open{ display: inline-block; color: dodgerblue; margin: 2em; } </style> </head> <body> <a href="#modal" class="modal-open">Open Modal</a> <div class="modal" id="modal"> <div class="modal__content"> <a href="#" class="modal__close">×</a> <h2 class="modal__heading">Desi Developer</h2> <p class="modal__paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis possimus inventore suscipit mollitia, odit aliquam laudantium praesentium porro hic asperiores expedita obcaecati earum ullam, nisi laborum accusamus, id placeat tenetur? Consequatur, neque. Explicabo, reiciendis quia distinctio eius facere pariatur expedita, amet hic alias illum harum inventore, ullam tempore quos. Quod, repellat ratione culpa qui harum blanditiis atque voluptatem iste id. Rerum veniam ipsum quisquam mollitia vel fuga dicta tempora. Magni, labore beatae eaque suscipit mollitia pariatur impedit accusantium explicabo aspernatur adipisci sapiente eveniet qui facilis in voluptas nisi! Ipsum, praesentium! Quos, ex. Ipsum asperiores quasi, nam atque voluptatibus reprehenderit repellat fuga pariatur consequatur quae hic, numquam commodi illo aut. Laborum et natus magni illum tenetur est, minus eligendi quisquam facilis. Quis enim sit facilis, dolor, ab quas sint sapiente ut voluptatibus excepturi dolorum, consequuntur doloremque error facere? Nisi vel placeat magni asperiores, id, aliquid quisquam eos et eum repellat molestiae.</p> </div> </div> </body> </html>
... View more