Skip to main content
spicone11
spicone11
Participant
July 11, 2018
Answered

Multiple Modal Boxes

  • July 11, 2018
  • 2 replies
  • 6843 views

Hello,

I have a very good understanding of html and css but I am a beginner when it comes to javascript.

I'm trying to create multiple modal boxes on one page and I'm unsure how to do it, right now I can only get one to open.

Here is an example of the code I have:

HTML

<!-- Trigger/Open The Modal -->

<button id="myBtn">Open Modal</button>

<!-- The Modal -->

<div id="myModal" class="modal">

  <!-- Modal content -->

  <div class="modal-content">

    <span class="close">&times;</span>

    <p>Some text in the Modal..</p>

  </div>

</div>

CSS

/* The Modal (background) */

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,

.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

JAVASCRIPT

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {

    modal.style.display = "block";

}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {

    modal.style.display = "none";

}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {

    if (event.target == modal) {

        modal.style.display = "none";

    }

}

I appreciate any help with this!!

This topic has been closed for replies.
Correct answer osgood_

Your best bet is to use jQuery as its much simpler to write than vanilla javascript.

If you use the built in jQuery load function you can load different files into the one modal window. As an example there are 2 buttons on the page (see code below) - Monday, Tuesday - create 2 html files in your site folder named monday.html and tuesday.html and populate them with the code you want to appear in the modal window when the reciprocal button, Monday or Tuesday is clicked.

All you need to do is make sure data="monday", data="tuesday' attached to the buttons (see code below) are the same as your file names monday.html, tuesday.html - you can name the data anything you like of course.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Modal Load</title>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"></script>

<script>

$(document).ready(function(){

$('.modal-overlay').hide();

$('.open-modal').css('cursor' , 'pointer').click(function(){

var file = $(this).attr('data');

$(".modal-content").load(file + ".html");

$('.modal-overlay').fadeIn();

});

$('.close-modal').css('cursor' , 'pointer').click(function(){

$('.modal-overlay').fadeOut();

});

});

</script>

<style>

body {

margin: 0;

}

.modal-overlay {

display: flex;

justify-content: center;

align-items: center;

position: fixed;

top: 0;

height: 100vh;

width: 100vw;

background-color: rgba(0,0,0, 0.5)

}

.modal {

position: relative;

width: 75%;

background-color: #fff;

}

.modal-content {

padding: 25px;

}

.close-modal {

position: absolute;

right: 0;

top: -45px;

background-color: #000;

color: #fff;

padding: 10px 13px;

font-size: 18px;

}

</style>

</head>

<body>

<button class="open-modal" data="monday">Monday</button>

<button class="open-modal" data="tuesday">Tuesday</button>

<div class="modal-overlay">

<div class="modal">

<div class="close-modal">&times;</div>

<div class="modal-content">

</div>

<!-- end modal-content -->

</div>

<!-- end modal -->

<div>

<!-- end modal-overlay -->

</body>

</html>

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
July 12, 2018

Make an image gallery with one Bootstrap Modal + Carousel component.

https://alt-web.com/TUTORIALS/?id=bootstrap_modal_carousel_gallery

Nancy O'Shea— Product User & Community Expert
TheBCMan
TheBCMan
Participating Frequently
July 12, 2018

You don't need to create multiple boxes, just re-write the contents inside the one box for each different "window" you might want.

spicone11
spicone11Author
Participant
July 12, 2018

But when I create another modal button the second will not open. How do I get more than one modal to open on the same page?

O
osgood_Correct answer
Legend
July 12, 2018

Your best bet is to use jQuery as its much simpler to write than vanilla javascript.

If you use the built in jQuery load function you can load different files into the one modal window. As an example there are 2 buttons on the page (see code below) - Monday, Tuesday - create 2 html files in your site folder named monday.html and tuesday.html and populate them with the code you want to appear in the modal window when the reciprocal button, Monday or Tuesday is clicked.

All you need to do is make sure data="monday", data="tuesday' attached to the buttons (see code below) are the same as your file names monday.html, tuesday.html - you can name the data anything you like of course.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Modal Load</title>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"></script>

<script>

$(document).ready(function(){

$('.modal-overlay').hide();

$('.open-modal').css('cursor' , 'pointer').click(function(){

var file = $(this).attr('data');

$(".modal-content").load(file + ".html");

$('.modal-overlay').fadeIn();

});

$('.close-modal').css('cursor' , 'pointer').click(function(){

$('.modal-overlay').fadeOut();

});

});

</script>

<style>

body {

margin: 0;

}

.modal-overlay {

display: flex;

justify-content: center;

align-items: center;

position: fixed;

top: 0;

height: 100vh;

width: 100vw;

background-color: rgba(0,0,0, 0.5)

}

.modal {

position: relative;

width: 75%;

background-color: #fff;

}

.modal-content {

padding: 25px;

}

.close-modal {

position: absolute;

right: 0;

top: -45px;

background-color: #000;

color: #fff;

padding: 10px 13px;

font-size: 18px;

}

</style>

</head>

<body>

<button class="open-modal" data="monday">Monday</button>

<button class="open-modal" data="tuesday">Tuesday</button>

<div class="modal-overlay">

<div class="modal">

<div class="close-modal">&times;</div>

<div class="modal-content">

</div>

<!-- end modal-content -->

</div>

<!-- end modal -->

<div>

<!-- end modal-overlay -->

</body>

</html>

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices