A Look On Modals

OVERVIEW

Today, I will be introducing and demonstrating a simple, useful and impactful way of showing information, the Modal! A modal is a separate dialog box or popup window that is displayed on top of the current page you are on. Examples of the Modal is shown above.

Click on the link below to download the imgs used for this tutorial and the JavaScript Framework of the Modal file. Move the img folder and js file to your webapp.

Download

INSTRUCTIONS

I began the creation of this project just because I enjoy the use of Modals on websites and the way the information is shown is neat. The first steps in creating this framework was to understand how W3Schools was able to create responsive Modal Images with CSS and JavaScript.
Link: https://www.w3schools.com/howto/howto_css_modal_images.asp

After understanding the basic concepts, it was just a matter of converting that CSS and JavasScript into the framework style code that we have been learning throughout the course. The best was to go about this was to copy paste their code, then attempt to replicate the Modal Image shown with my own modal image below it using HTML and my JavaScript file that is written in the framework style.

Once that was completed, I implemented some design features that made it more appealing and not too plain.

Shown below will be how you could adapt to my framework JavaScript file to create your own Modal Image using only HTML.

Section 1

First and foremost, we need an image that is to be clicked on later for the modal to popup. In order to do that, insert this script code into your HTML.

                <script src="tutorial.js"></script>
                <script>

                    "use strict";

                    function my$(eleId) {
                        return document.getElementById(eleId);
                    }

                    var tutorial = new MakeFW();

                    var modalDisplayObj = tutorial.MakeModalDisplay(
                        {
                            id: "modalDisplay",
                            contentID: "modalContent"
                        });

                </script>
                

Add the following into your HTML Body

                <div id="modalDisplay"></div>
                

Click on the Modal below to see what you should currently have!

Section 2

Now that you have an image displayed, we want to actually make the Modal content window. Add this into your script.

                var modalContentObj = tutorial.MakeModalContent(
                    {
                        id: "modalContent",
                        displayID: "modalDisplay"
                    });
                

Add the following into your HTML Body

                <div id="modalContent"></div>
                

Click on the Modal below to see what you should currently have!

Section 3

At this point, the simple version of the Modal is completed! Now, we just have to design it to make it more appealing on a Webpage. All you have to do is edit the objects created in the script. Shown below are some things you can edit! Make sure to place another background color other than white to see changes. For the display, you are able to edit it's image, width, height, title, description, border-radius, padding, and image rotation. For the popup, you are able to edit it's image, title, description, background color, and the opacity of the popup.

                var modalDisplayObj = tutorial.MakeModalDisplay(
                    {
                        id: "modalDisplay",
                        contentID: "modalContent",
                        modalImage: "./imgs/yogabg.jpg",
                        modalWidth: 300,
                        modalHeight: 200,
                        modalTitle: "Yoga",
                        modalDesc: "Meditation on the Beach",
                        borderRadius: 0,
                        padding: "20px 20px 90px 20px",
                        imageRot: 5
                    });

                var modalContentObj = tutorial.MakeModalContent(
                    {
                        id: "modalContent",
                        displayID: "modalDisplay",
                        contentImage: "./imgs/yogabg.jpg",
                        imageTitle: "Yoga",
                        imageDescription: "Woahhhh! What. A. View.",
                        backgroundColor: "black",
                        opacity: 1
                    });
                

Click on the Modal below to see what the settings above did!

Section 4

With the added designs of the Modal, it is essentially done. If you want to have more than one Modal, simply copy pasta the code already written, change IDs/Object variable names and voila, MULTIPLE MODALS.

                HTML

                <div id="modalDisplay"></div>
                <div id="modalContent"></div>

                <div id="modalDisplay2"></div>
                <div id="modalContent2"></div>

                ---------------------------------------------------------------
                HTML.Script

                var modalDisplayObj = tutorial.MakeModalDisplay(
                    {
                        id: "modalDisplay",
                        contentID: "modalContent",
                        modalImage: "./imgs/yogabg.jpg",
                        modalWidth: 300,
                        modalHeight: 200,
                        modalTitle: "Yoga",
                        modalDesc: "Meditation on the Beach",
                        borderRadius: 0,
                        padding: "20px 20px 90px 20px",
                        imageRot: 5
                    });

                var modalContentObj = tutorial.MakeModalContent(
                    {
                        id: "modalContent",
                        displayID: "modalDisplay",
                        contentImage: "./imgs/yogabg.jpg",
                        imageTitle: "Yoga",
                        imageDescription: "Woahhhh! What. A. View.",
                        backgroundColor: "black",
                        opacity: 1
                    });

                var modalDisplayObj2 = tutorial.MakeModalDisplay(
                    {
                        id: "modalDisplay2",
                        contentID: "modalContent2",
                        modalImage: "./imgs/yogabg.jpg",
                        modalWidth: 300,
                        modalHeight: 200,
                        modalTitle: "Yoga",
                        modalDesc: "Meditation on the Beach",
                        borderRadius: 0,
                        padding: "20px 20px 90px 20px",
                        imageRot: 5
                    });

                var modalContentObj2 = tutorial.MakeModalContent(
                    {
                        id: "modalContent2",
                        displayID: "modalDisplay2",
                        contentImage: "./imgs/yogabg.jpg",
                        imageTitle: "Yoga",
                        imageDescription: "Woahhhh! What. A. View.",
                        backgroundColor: "black",
                        opacity: 1
                    });
                

CONCLUSION

Great, with the understanding of how to create a Modal and implementation of design features, we are done. We were able to build a Modal from just an image to a clickable popup that holds an image and some information. We have a functional Modal with different animations that could be used to build on top of bigger projects. For example, I will be using the Modal to build a portfolio page.

Curious On How The Framework Was Built?

                "use strict";

                function MakeFW() {
                    var fw = {};

                    function $(element) {
                        return document.getElementById(element);
                    }

                    fw.MakeModalDisplay = function (params) {

                        // Make sure we have been passed an object (params) and that object has an id property.
                        if (!params || !params.id) {
                            alert("MakeModalDisplay must be passed an object with an 'id' property.");
                            return;
                        }

                        // Make sure the params.id property refers to a DOM element
                        var displayObj = $(params.id);
                        if (!displayObj) {
                            alert("MakeModalDisplay must be passed an object with an 'id' property " +
                                    "that references an HTML element.");
                            return;
                        }

                        // Set default values unless specified by User 
                        params.modalImage = params.modalImage || "./imgs/yogabg.jpg";
                        params.modalWidth = params.modalWidth || 400;
                        params.modalHeight = params.modalHeight || 200;
                        params.borderRadius = params.borderRadius || 0;
                        params.modalTitle = params.modalTitle || "";
                        params.modalDesc = params.modalDesc || "";
                        params.boxShadow = params.boxShadow || "0px 0px 0px";
                        params.padding = params.padding || 0;
                        params.fontFamily = params.fontFamily || "Comic Sans MS, cursive, sans-serif";

                        // Set attributes to the html element referenced by id
                        displayObj.style.borderRadius = (params.borderRadius * 100) + "px";
                        displayObj.style.width = params.modalWidth + "px";
                        displayObj.style.height = params.modalHeight + "px";
                        displayObj.style.display = "inline-block";
                        displayObj.style.margin = "4vh";
                        displayObj.style.fontFamily = "Comic Sans MS, cursive, sans-serif";

                        // Creates the image for the modal passed by User with set styles
                        var displayImage = document.createElement("img");
                        displayImage.src = params.modalImage;
                        displayImage.width = params.modalWidth;
                        displayImage.height = params.modalHeight;
                        displayImage.style.boxSizing = "border-box";
                        displayObj.appendChild(displayImage);

                        // Additional attributes for creative design - Polaroid Touch
                        displayObj.style.backgroundColor = "white";
                        displayObj.style.padding = params.padding;
                        var h4 = document.createElement("H4");
                        var p = document.createElement("p");
                        var title = document.createTextNode(params.modalTitle);
                        var desc = document.createTextNode(params.modalDesc);

                        displayObj.style.color = "#3464AC";
                        displayObj.style.fontSize = "12px";

                        p.appendChild(desc);
                        h4.appendChild(title);
                        displayObj.appendChild(h4);
                        displayObj.appendChild(p);

                        // Image Design Features
                        displayObj.style.WebkitTransform = "rotate(" + params.imageRot + "deg)";
                        displayObj.style.transform = "rotate(" + params.imageRot + "deg)";

                        // Mouse Events    
                        displayObj.onmouseover = function () {
                            this.style.opacity = .85;
                            this.style.boxShadow = params.boxShadow;
                            displayObj.style.transform = "rotate(0deg)";
                        };
                        displayObj.onmouseout = function () {
                            this.style.opacity = 1;
                            this.style.boxShadow = "0px 0px 0px";
                            this.style.transform = "rotate(" + params.imageRot + "deg)";
                        };

                        var modalContent = $(params.contentID);

                        modalContent.style.transform = "scale(0)";

                        displayObj.onclick = function () {
                            modalContent.style.transition = "all .4s";
                            modalContent.style.transform = "scale(1)";
                        };

                        return displayObj;
                    };

                    fw.MakeModalContent = function (params) {

                        // Make sure we have been passed an object (params) and that object has an id property.
                        if (!params || !params.id) {
                            alert("MakeModalContent must be passed an object with an 'id' property.");
                            return;
                        }

                        // Make sure the params.id property refers to a DOM element
                        var contentObj = $(params.id);
                        if (!contentObj) {
                            alert("MakeModalContent must be passed an object with an 'id' property " +
                                    "that references an HTML element.");
                            return;
                        }

                        // Set default values unless specified by User 
                        params.contentImage = params.contentImage || "./imgs/yogabg.jpg";
                        params.backgroundColor = params.backgroundColor || "black";
                        params.opacity = params.opacity || 1;
                        params.imageTitle = params.imageTitle || "Lorem Ipsum";
                        params.imageDescription = params.imageDescription || "Lorem Ipsum Dolor Sit Amet";

                        // set attributes to the html element referenced by id
                        contentObj.style.backgroundColor = params.backgroundColor;
                        contentObj.style.fontFamily = "Comic Sans MS, cursive, sans-serif";
                        contentObj.style.opacity = params.opacity;
                        contentObj.style.width = 100 + "%";
                        contentObj.style.height = 100 + "%";
                        contentObj.style.left = 0 + "px";
                        contentObj.style.top = 0 + "px";
                        contentObj.style.position = "fixed";
                        contentObj.style.zIndex = "1";
                        contentObj.style.overflow = "auto";
                        contentObj.style.paddingTop = 100 + "px";

                        // Mouse Events
                        contentObj.onclick = function () {
                            this.style.transition = "all .01s";
                            this.style.transform = "scale(0)";
                        };

                        // Creates the image for the modal passed by User with set styles
                        var contentImage = document.createElement("img");
                        contentImage.src = params.contentImage;
                        contentImage.style.boxSizing = "border-box";
                        contentImage.style.cssFloat = "left";
                        contentImage.style.margin = "50px";
                        contentImage.style.display = "block";
                        contentImage.style.width = 40 + "%";
                        contentImage.style.maxWidth = 700 + "px";
                        contentObj.appendChild(contentImage);

                        // Creates the Text for the modal passed by User with set styles
                        var contentDescription = document.createElement("div");
                        var h = document.createElement("H1");
                        var p = document.createElement("p");
                        var title = document.createTextNode(params.imageTitle);
                        var desc = document.createTextNode(params.imageDescription);

                        contentDescription.style.boxSizing = "border-box";
                        contentDescription.style.width = 40 + "%";
                        contentDescription.style.cssFloat = "left";
                        contentDescription.style.margin = "20px";
                        contentDescription.style.color = "white";
                        contentDescription.style.fontSize = "30px";

                        p.appendChild(desc);
                        h.appendChild(title);
                        contentDescription.appendChild(h);
                        contentDescription.appendChild(p);
                        contentObj.appendChild(contentDescription);

                        return contentObj;
                    };

                    return fw;
                }
            

Step 1

Starting from the top, I first established "use strict" for consistency in my code, created a function that makes/returns the fw, created an empty array fw, accessory function $ to avoid multiple uses of document.getElementByID, and two functions that initializes and creates the objects that have been called from the HTML side.

                    "use strict";

                    function MakeFW() {
                        var fw = {};

                        function $(element) {
                            return document.getElementById(element);
                        }

                        fw.MakeModalDisplay = function (params) {
                        };

                        fw.MakeModalContent = function (params) {
                        };

                        return fw;
                    }
                

Step 2

In both the functions, MakeModalDisplay (the image displayed on webpage) and MakeModalContent (the popup window), I placed some error handling to avoid any incorrect uses of the framework. Read comments to understand the particular error handling used!

                    fw.MakeModalDisplay = function (params) {

                        // Makes sure we have been passed an object (params) and that object has an id property.
                        if (!params || !params.id) {
                            alert("MakeModalDisplay must be passed an object with an 'id' property.");
                            return;
                        }

                        // Makes sure the params.id property refers to a DOM element
                        var displayObj = $(params.id);
                        if (!displayObj) {
                            alert("MakeModalDisplay must be passed an object with an 'id' property " +
                                    "that references an HTML element.");
                            return;
                        }
                    };

                    fw.MakeModalContent = function (params) {
                        
                        // Makes sure we have been passed an object (params) and that object has an id property.
                        if (!params || !params.id) {
                            alert("MakeModalContent must be passed an object with an 'id' property.");
                            return;
                        }

                        // Makes sure the params.id property refers to a DOM element
                        var contentObj = $(params.id);
                        if (!contentObj) {
                            alert("MakeModalContent must be passed an object with an 'id' property " +
                                    "that references an HTML element.");
                            return;
                        }
                    };
                

Step 3

Now, I worked towards what we see in Section 1 of the tutorial, displaying the image. First, I added the default values of css to the function MakeModalDisplay unless it has been specified by the user on the HTML side.

                    fw.MakeModalDisplay = function (params) {

                        // Makes sure we have been passed an object (params) and that object has an id property.
                        if (!params || !params.id) {
                            alert("MakeModalDisplay must be passed an object with an 'id' property.");
                            return;
                        }

                        // Makes sure the params.id property refers to a DOM element
                        var displayObj = $(params.id);
                        if (!displayObj) {
                            alert("MakeModalDisplay must be passed an object with an 'id' property " +
                                    "that references an HTML element.");
                            return;
                        }

                        // Set default values unless specified by User 
                        params.modalImage = params.modalImage || "./imgs/yogabg.jpg";
                        params.modalWidth = params.modalWidth || 400;
                        params.modalHeight = params.modalHeight || 200;
                        params.borderRadius = params.borderRadius || 0;
                        params.modalTitle = params.modalTitle || "";
                        params.modalDesc = params.modalDesc || "";
                        params.boxShadow = params.boxShadow || "0px 0px 0px";
                        params.padding = params.padding || 0;
                        params.fontFamily = params.fontFamily || "Comic Sans MS, cursive, sans-serif";
                    };
                

Then, I set the attributes to the HTML element referenced by id by adding the following code to the code above.

                    // Set attributes to the html element referenced by id
                    displayObj.style.borderRadius = (params.borderRadius * 100) + "px";
                    displayObj.style.width = params.modalWidth + "px";
                    displayObj.style.height = params.modalHeight + "px";
                    displayObj.style.display = "inline-block";
                    displayObj.style.margin = "4vh";
                    displayObj.style.fontFamily = "Comic Sans MS, cursive, sans-serif";
                

Next, I created and appended the image for the Modal display passed by the user or used the default values with set styles by adding this.

                    // Creates the image for the modal passed by User with set styles
                    var displayImage = document.createElement("img");
                    displayImage.src = params.modalImage;
                    displayImage.width = params.modalWidth;
                    displayImage.height = params.modalHeight;
                    displayImage.style.boxSizing = "border-box";
                    displayObj.appendChild(displayImage);
                

Lastly, I returned the object from the framework and voila, I got an image on the page like you see in Section 1.

                    return displayObj;
                

Step 4

At this point, I worked towards what we see in Section 2 of the tutorial, creating the pop up. Similarly to before, I added the default values of css to the function MakeModalContent unless it has been specified by the user on the HTML side

                    fw.MakeModalContent = function (params) {

                        // Make sure we have been passed an object (params) and that object has an id property.
                        if (!params || !params.id) {
                            alert("MakeModalContent must be passed an object with an 'id' property.");
                            return;
                        }

                        // Make sure the params.id property refers to a DOM element
                        var contentObj = $(params.id);
                        if (!contentObj) {
                            alert("MakeModalContent must be passed an object with an 'id' property " +
                                    "that references an HTML element.");
                            return;
                        }

                        // Set default values unless specified by User 
                        params.contentImage = params.contentImage || "./imgs/yogabg.jpg";
                        params.backgroundColor = params.backgroundColor || "black";
                        params.opacity = params.opacity || 1;
                        params.imageTitle = params.imageTitle || "Lorem Ipsum";
                        params.imageDescription = params.imageDescription || "Lorem Ipsum Dolor Sit Amet";
                    }
                

Then, I set the attributes to the HTML element referenced by id by adding the following code to the code above.

                    // set attributes to the html element referenced by id
                    contentObj.style.backgroundColor = params.backgroundColor;
                    contentObj.style.fontFamily = "Comic Sans MS, cursive, sans-serif";
                    contentObj.style.opacity = params.opacity;
                    contentObj.style.width = 100 + "%";
                    contentObj.style.height = 100 + "%";
                    contentObj.style.left = 0 + "px";
                    contentObj.style.top = 0 + "px";
                    contentObj.style.position = "fixed";
                    contentObj.style.zIndex = "1";
                    contentObj.style.overflow = "auto";
                    contentObj.style.paddingTop = 100 + "px";
                

Next, I created and appended the image for the Modal popup passed by the user or used the default values with set styles by adding this.

                    // Creates the image for the modal passed by User with set styles
                    var contentImage = document.createElement("img");
                    contentImage.src = params.contentImage;
                    contentImage.style.boxSizing = "border-box";
                    contentImage.style.cssFloat = "left";
                    contentImage.style.margin = "50px";
                    contentImage.style.display = "block";
                    contentImage.style.width = 40 + "%";
                    contentImage.style.maxWidth = 700 + "px";
                    contentObj.appendChild(contentImage);
                

I then created and appended the title and description for the Modal popup passed by the user or used the default values with set styles by adding this.

                    // Creates the Text for the modal passed by User with set styles
                    var contentDescription = document.createElement("div");
                    var h = document.createElement("H1");
                    var p = document.createElement("p");
                    var title = document.createTextNode(params.imageTitle);
                    var desc = document.createTextNode(params.imageDescription);

                    contentDescription.style.boxSizing = "border-box";
                    contentDescription.style.width = 40 + "%";
                    contentDescription.style.cssFloat = "left";
                    contentDescription.style.margin = "20px";
                    contentDescription.style.color = "white";
                    contentDescription.style.fontSize = "30px";

                    p.appendChild(desc);
                    h.appendChild(title);
                    contentDescription.appendChild(h);
                    contentDescription.appendChild(p);
                    contentObj.appendChild(contentDescription);
                

With the popup window initialized and created, I then added a mouse event to get out of the popup window once I was in it.

                    contentObj.onclick = function () {
                        this.style.transition = "all .01s";
                        this.style.transform = "scale(0)";
                    };
                

Alongside of getting out of the popup window, I had to figure a way to get in it first. I added this to my MakeModalDisplay function. Essentially, this pulls the ID from the modal popup window, tells it to transform into scale 0 (hiding the window) and when the image displayed on the webpage is clicked the popup will transform to its original scale in a transition of .4 seconds.

                    var modalContent = $(params.contentID);

                    modalContent.style.transform = "scale(0)";

                    displayObj.onclick = function () {
                        modalContent.style.transition = "all .4s";
                        modalContent.style.transform = "scale(1)";
                    };
                

Lastly, I returned the object from the framework and voila, I got an image on the page with a popup window when clicked and the disappearance of the popup after I click again like you see in Section 2.

                    return contentObj;

                

Step 5

At this point, I worked towards what we see in Section 3 of the tutorial, design features. The first thing I added was similarly to how W3Schools had an on hover event where it dropped the opacity. In the code below, I used the HTML Dom onmouseover and onmouseout mouse event functions to replicate the effect and added a little more to it, such as box shadow and image rotations. All of which is added to MakeModalDisplay function.

                    displayObj.onmouseover = function () {
                        this.style.opacity = .85;
                        this.style.boxShadow = params.boxShadow;
                        displayObj.style.transform = "rotate(0deg)";
                    };
                    displayObj.onmouseout = function () {
                        this.style.opacity = 1;
                        this.style.boxShadow = "0px 0px 0px";
                        this.style.transform = "rotate(" + params.imageRot + "deg)";
                    };
                

In order to make the Modal image rotation effect, I took advantage of WebKit and Transform.

                    displayObj.style.WebkitTransform = "rotate(" + params.imageRot + "deg)";
                    displayObj.style.transform = "rotate(" + params.imageRot + "deg)";
                

As mentioned before in step 4, I added a popup animation to the Modal that sort of replicates the zooming in and zooming out animation with the Modal displayed in W3Schools. It is just taking advantage of the scale function in transform and manipulating transition speeds to create the awesome effect you see.

                    var modalContent = $(params.contentID);

                    modalContent.style.transform = "scale(0)";

                    displayObj.onclick = function () {
                        modalContent.style.transition = "all .4s";
                        modalContent.style.transform = "scale(1)";
                    };
                

If you are creative enough, there are hundreds of ways to manipulate the look and animation of the Modals. This is just a look on how I was able to do it using the HTML DOM and being able to replicate existing animations that people used.

REFERENCES

Here are some references that I have used on my journey to complete this project!

The link below was the inspiration of it all! It was the beginning of the Modal and the basis I was following while I converted CSS/HTML to framework style JavaScript.

Modal

The link below was my inspiration to turn the Modal Image to an Modal Image with a title and description. Also, I shaped the Modal Image to look like a Polaroid Photo because of this.

Cards

The link below was what I used for consulting what to use for the framework, regarding animations, styles, and document. functions.

JSRefs