javascript - 带有模态弹出窗口的正方形网格

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>

我想添加一个功能，当用户点击任何方 block 时，会出现一个漂亮的模式弹出窗口。与此 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/