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 jQuery Basics (2014) Creating a Simple Lightbox Creating and Appending Detached DOM elements

Brandon Jacobi
Brandon Jacobi
4,702 Points
Posted by Brandon Jacobi
Brandon Jacobi
4,702 Points

JQuery: Having trouble figuring out what to do?

I don't know what is supposed to be done here. Can anyone help out and help me figure it out?

js/app.js 
//Create the Modal
var $modal = $("<div id='modal'></div>");

//Create a placeholder for text in the modal
var $placeHolder = $("<p id='placeHolder'></p>");
$modal.append($placeHolder);

//Create a button to dismiss modal and add it to modal
var $dismissButton = $("<button>Dismiss</button>");

//Hide modal when button is pressed
$dismissButton.click(function(){
  $modal.hide(300);
});

$("body").append($modal);

//A function to show a modal
function displayModal(message) {
  $placeHolder.text(message);
  $modal.show();
}

//Show an example modal
displayModal("Hello World!");
index.html 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <title>Modal Example</title>
</head>
<body>
    <h1>Modal Example Page</h1>

    <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

2 Answers

Grace Kelly
Grace Kelly
33,990 Points
Grace Kelly
Grace Kelly
33,990 Points

Hi Brandon, here we are asked to append the $dismissButton to the $modal, we can do this by using the append() method which we can see an example of in this code challenge on line 6:

$modal.append($placeHolder);

with this knowledge you can apply it to appending the $dismissButton to the $modal

Hint: we append the $dismissButton in this section of code:

//Create a button to dismiss modal and add it to modal
var $dismissButton = $("<button>Dismiss</button>");

Hope that helps!!

Thelma Boamah
Thelma Boamah
15,726 Points
Thelma Boamah
Thelma Boamah
15,726 Points

You're missing the https: in your src attribute for the jQuery CDN script. Also, you're not appending dismissButton to the modal.