带有模式弹出框的正方形网格

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

在您的html中包含jQuery并添加以下代码

$(document).ready(function () {

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