Button Revealing Popup (Modal)

This post will go over the very minimum of creating a popup (modal) for mobile and desktop displays. To download the full example click here

What we'll go over

1. Create a clickable button that scrolls with the user
2. Clicking the button will reveal some hidden HTML content
3. Any content behind the modal element will be gray
4. Allow the user to close the modal

Example of active modal element

Creating the clickable button

CSS

#contactButton{
    position: fixed;
    bottom: 100px;
    right: 30px;
}
#contactButton_image:hover{
    filter: brightness(50%);
}

The CSS code for creating the button is really simple. The position of the button is set to fixed, meaning the location that we set it to on the screen will not move (even when the user scrolls) unless otherwise stated. That fixed location is at the bottom-right.

When the user hovers over the button using :hover, we apply a filter to the image turning the brightness down to 50%.

HTML

<div id="contactButton">
    <img id="contactButton_image" src="https://scadradio.org/wp-        content/uploads/2018/05/Contact_Button.png" width="60" onclick="openForm();"/>
</div>

The button isn't a button tag but is instead an image that listens for a button click in JavaScript using onclick. When the user clicks on the button it will call the openForm() function, which will open the modal (we'll get to the JavaScript code below). The CSS we wrote earlier is applied to anything between the div elements.

Creating the modal

CSS

.modal {
    display: none;
    position: fixed; 
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4);
}
.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    width: 40%;
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 4px 0 rgba(0, 0, 0, 0.3);
    font-family: sans-serif;
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    padding-right: 40px;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
@media only screen and (max-width : 1150px) {
    .modal-content{
        width: 100%;
    }
}

The .modal class is the gray background that fills the screen.

display: none; makes the element hidden
z-index: 99; determines the height of an element. For example, whether an element is in front of or behind another object
width: 100%; changes the width of the element to extend to the full width of the container
height: 100%; changes the height of the element to extend to the full height of the container
overflow: auto; determines whether a scrollbar is necessary if the contents go beyond the size of the element
background-color: rgba(0,0,0,0.4); determines the color of the element using RGBA ('A' being alpha) values. In this case, it's black with an opacity of 40%


The .modal-content has the main HTML content you want the user to see

margin: 10% auto; determines how far away the edges of the element are from another element. In this case, the margin for the width is 10% of the screen, and the height is automatically determined based on the width
padding: 20px; expands the element 20 pixels in every direction
-webkit-animation- animates the element, for more in-depth information about animations, look at W3
box-shadow: adds a background shadow to the element. You can change the distance of the shadow in pixels, and the color of the shadows using RGBA
font-family; changes the font of text

The .close class is the button that closes the modal

text-decoration: none; removes any text decoration like underlining to the text
cursor: pointer; changes the cursor look and feel

The @media style

When the screen is 1150px or less, the width of the .modal-content changes from 40% of the whole screen to 100%. This is set up so that when the modal is opened on a smartphone or a small screen, the content is able to use the full width of the screensize rather than only 40%.


Making the buttons work



HTML

<div id="contentPopup" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal();">×</span>
        <center>
            <h1> Hidden Text </h1>
        </center>
    </div>
</div>

JavaScript

function openForm() {
    var modal = document.getElementById('contentPopup');
    modal.style.display = "block";

}
function closeModal() {
    var modal = document.getElementById('contentPopup');
    modal.style.display = "none";
}

To change the CSS attributes of an element via JavaScript you must first get the CSS attributes of the element you want to change by either referencing it by its Id or Class. For this example we used .getElementById, but you can just as easily use getElementByClassName. Afer we attached the element to the variable 'modal', we can change the display attributes from "none" to "block", making it visible.