Box Pattern with Pop-Up Modal

Question

Box Pattern with Pop-Up Modal

Check out the grid of squares I've coded 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>

If a user clicks on any square, I'd like a modal popup to appear. The styling should be similar to this https://codepen.io/khaag/pen/sbcou

How can I implement this feature with my current code? Also, how can I make this grid more dynamic than it is now?

javascript jquery html css

Answer 1

Answer №1

Create a click event handler like this:

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

Here's an example using tomloprodModal:

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

View the updated JSfiddle here: https://jsfiddle.net/as1mpe25/2/

Answer 2

Create a click event handler like this:

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

Here's an example using tomloprodModal:

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

View the updated JSfiddle here: https://jsfiddle.net/as1mpe25/2/

Answer 3

Answer №2

Make sure to incorporate jQuery into your HTML file, then insert the following script:

$(document).ready(function () {

$(".box").click(function(){
    alert("great job!");/* CUSTOMIZE THIS WITH YOUR SPECIFIC CODE */
});});

Answer 4

Make sure to incorporate jQuery into your HTML file, then insert the following script:

$(document).ready(function () {

$(".box").click(function(){
    alert("great job!");/* CUSTOMIZE THIS WITH YOUR SPECIFIC CODE */
});});

Box Pattern with Pop-Up Modal

Answer №1

Answer №2

Similar questions

Can JavaScript be used to create a CSRF token and PHP to check its validity?

Modify input value using jQuery upon moving to the next step

Is there a way to access or delete a randomly generated document ID in Firestore?

Configuring the AJAX URL for jQuery in a JS file within an ASP.NET MVC application

Encountering: error TS1128 - Expecting declaration or statement in a ReactJS and TypeScript application

Utilizing AJAX to load a WAV file

Verify that the string does not have any repeating characters

Retrieve all elements from an array using jQuery

Retrieve 2 data points from an HTML source code using Python

Step-by-step guide on installing both Angular and Nodejs within a single folder

How to extract the value of an HTML text field by executing an SQL query in PHP

What is causing the QJsonValue(undefined) to be returned?

TypeScript struggling to recognize specified types when using a type that encompasses various types

Tips for utilizing Jquery to manage a dropdown designed in button form

Convert a prototype code to jQuery using AJAX syntax

Navigating through the Express.js routes incorrectly

Managing timestamps of creation and modification with Sequelize and Postgresql

Unable to retrieve data using Ajax post method

Two unnamed objects cannot be combined using the AsyncPipe

Finding the label that is linked to the current DIV or textarea by its "for" property