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 */
});});

正方形网格与模态弹出窗口

2 个答案: