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

Question

I have coded grid of squares as below:

  <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>

I want to add a functionality where when user clicks on any of the squares a nice modal popup will appear. A modal with similar style to this https://codepen.io/khaag/pen/sbcou

How can achieve something like this with my existing code? Also how make this grid drawing more dynamic than what I have right now?

Answer 1

Register an click event as follow:

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

---

Example with tomloprodModal

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

---

Updated JSfiddle: https://jsfiddle.net/as1mpe25/2/

Answer 2

include jquery to in your html and add below code

$(document).ready(function () {

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