сетки квадратов с модальным всплывающим окном

Question

я закодирован сетки из квадратов, как показано ниже:

<div class='square-container'> 
    <div class='square'></div> 
    <div class='square'></div> 
    <div class='square'></div> 
    <div class='square'></div> 
    <div class='square'></div> 
    <div class='square'></div> 
    <div class='square'></div> 
    <div class='square'></div> 
    <div class='square'></div> 
    <div class='square'></div> 
    <div class='square'></div> 
    <div class='square'></div> 
    ..... 

    </div> 

Я хочу, чтобы добавить функциональность, где, когда пользователь нажимает на любом из квадратов появится хорошее модальное всплывающее окно. Модальный с похожим стилем к этому https://codepen.io/khaag/pen/sbcou

Как можно добиться чего-то подобного моим существующим кодом? Также как сделать рисунок сетки более динамичным, чем то, что у меня есть сейчас?

Answer 1

Регистрация событие щелчка следующим образом:

$(".square").on("click", function(){ 
    //////////// Your modal window code 
}); 

---

Пример с tomloprodModal

$(".square").on("click", function(){ 
    TomloprodModal.create({ 
     bgColor: "#FFFFFF", 
     textColor: "#333333", 
     title: "Hi!", 
     content: "Nothing to say", 
    }); 
}); 

---

Обновлено JSfiddle: https://jsfiddle.net/as1mpe25/2/

Answer 2

включают JQuery в г наш HTML и добавьте ниже код

$(document).ready(function() { 

$(".square").click(function(){ 
    alert("paaoi");/* REPLACE THIS WITH YOUR OWN CODE */ 
});});