rory-h rory-h - 1 year ago 85
CSS Question

Grid of squares with modal popup

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 Source

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/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download