Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Franklin Gomez
Franklin Gomez
6,549 Points

How to duplicate a light box bottom and open new content from new div (javascript bigginer)

I am stuck in trying to duplicate another light box for modal 2. There is no problem with modal 1.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    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 */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
</style>
</head>
<body>

<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal 1</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>




<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal 2</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like)</p>
  </div>

</div>


<script>
// 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 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";
    }
}
</script>

</body>
</html>

2 Answers

Franklin Gomez
Franklin Gomez
6,549 Points
Franklin Gomez
Franklin Gomez
6,549 Points

Hello Antti,

Thank you for replying. I tried changing the <button id="myBtn"> to <button id="myBtn-2"> and still did not work. Do I need to supplicate any javascript code in order so it can be identify with the new id(<button id="myBtn-2">)

Antti Lylander
Antti Lylander
9,686 Points

Yes, you need to change your JS as well. You need to select correct elements. Now if you copied your JS and only changed HTML it will not select correct elements. Remember that ID's should be unique always.

Antti Lylander
Antti Lylander
9,686 Points
Antti Lylander
Antti Lylander
9,686 Points

I don't know if you have some other bugs there, but at least you should not use the same id on two html elements. You have <button id="myBtn"> there twice. Id's must be unique.