Highlighted

Multiple Modal Boxes

New Here ,
Jul 11, 2018

Copy link to clipboard

Copied

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!!

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>

Views

3.8K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Multiple Modal Boxes

New Here ,
Jul 11, 2018

Copy link to clipboard

Copied

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!!

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>

Views

3.8K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 11, 2018 0
Guide ,
Jul 11, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 11, 2018 0
New Here ,
Jul 12, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 12, 2018 0
LEGEND ,
Jul 12, 2018

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 12, 2018 1
Guide ,
Jul 13, 2018

Copy link to clipboard

Copied

You don't want to make more than one, you want to make one and re-write the contents in the window using jquery or javascript.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 13, 2018 1
New Here ,
Aug 20, 2018

Copy link to clipboard

Copied

Hi Osgood_,

I like Your style, but is does not work. Do You use Bootstrap? If i use the code and add the goodfilename in data, i get an empty modal. So could You please give me more info?

regards

Jan

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 20, 2018 0
LEGEND ,
Aug 20, 2018

Copy link to clipboard

Copied

jant38816818  wrote

Hi Osgood_,

I like Your style, but is does not work. Do You use Bootstrap? If i use the code and add the goodfilename in data, i get an empty modal. So could You please give me more info?

regards

Jan

No I don't use Bootstrap. There's no reason for the code NOT to work in Bootstrap though unless youre trying to configure part Bootstrap  code and part bespoke code, then it could all go wrong or course but the standalone solution posted in this thread should work.

What is it you are trying to do?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 20, 2018 0
New Here ,
Aug 20, 2018

Copy link to clipboard

Copied

I did two tests, one on my local machine. The modal do not show the content of the files. Tesr two, i did copied the same content to the webserver. And YES is works in the web. Perhaps You can tel me why is does not work in the local machine webbrowser? now i know its working on the server, its easy te change.

See: HTTP://vakantie.pe.hu for a working example.

Thanks

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 20, 2018 0
LEGEND ,
Aug 20, 2018

Copy link to clipboard

Copied

jant38816818  wrote

I did two tests, one on my local machine. The modal do not show the content of the files. Tesr two, i did copied the same content to the webserver. And YES is works in the web. Perhaps You can tel me why is does not work in the local machine webbrowser? now i know its working on the server, its easy te change.

See: HTTP://vakantie.pe.hu for a working example.

Thanks

I cant see a reason for it NOT to be working locally. Its usually the other way around where things work locally but fail to work once uploaded.

Is your local machine blocking remote script files, such as the jquery script?

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

crossorigin="anonymous"></script>

Do you have another link to the jquery library on the page you are testing locally. I know you mentioned Bootstrap and that will have a link to the jquery library included as default, which could cause a conflict?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 20, 2018 0
New Here ,
Aug 20, 2018

Copy link to clipboard

Copied

I did test something else as You mentioned. I’m working on a Mac, High Sierra, with several  different browsers. Working local, no script blocking, the code works fine in Firefox, but not in Opera, Chrome or Safari. Changing the source to a different version gives no difference. Once setting the code live on a server, all works fine in all browsers i have. Strange isn’t It?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 20, 2018 0
LEGEND ,
Aug 20, 2018

Copy link to clipboard

Copied

A bit of Googling turns up the possible issue. Chrome appears to have problems with jquery load when working with local files, so that is probably true for Safari as well.

If you want to use those browsers for local testing the advice is to set up a local testing server ike Wamp or Mamp, then the problem should not happen.

As far as l know remote browsing is not affected and Chrome, Safari deal with the load function as expected.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 20, 2018 2
New Here ,
Aug 20, 2018

Copy link to clipboard

Copied

Thanks, I didn’t knew this. Great support. Thanks.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 20, 2018 0
Adobe Community Professional ,
Jul 12, 2018

Copy link to clipboard

Copied

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

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 12, 2018 1