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

Tips on stopping the page from scrolling following an ajax request (return false not effective or potentially misplaced)

Showing K2 Item Content instead of Title in JoomlaLearn how to showcase the content of a K2

Finding the image source of a clicked image

Center the HTML elements on the page

What is the best way to retrieve an <a> tag element using Selenium in Python?

Troubleshooting: ngAnimate max-height failing to apply to specific element

Reveal/Conceal footer upon vertical scrolling

Older versions of Internet Explorer, specifically IE9 and below, do not send the request body when making AJAX calls to a

Is there a way to ensure that my text is centered on top of an image while maintaining responsiveness?

Executing a Javascript function when a form is submitted

Spacing vertically within a table cell

The issue of asynchronous behavior causing malfunctioning of the PayPal button

Passing form data to PHP using AJAX in CodeIgniter Framework

What is the most efficient method for generating random dark colors using javascript code?

Managing user sessions in Node.js

Error in Express.js application: form fields lose their values

What's the best way to place my image inside a Bootstrap Accordion so that it is housed within the accordion-item?

The landscape orientation media query does not adhere to the specified maximum width

Having trouble deleting files in PHP?

Repetitive data in a list with AngularJS