CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mortuux
Mortuux

Reputation: 59

What is wrong with my popup window code?

After the code I will link a JSFiddle that show's what the code is and what it is supposed to do. I'm working on making a popup and having it so the background around it fades out when the pop up is visible. It works in the JSFiddle but not in the webpage. Here is my code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<script src="stylesheets/jquerystylesheet.js"></script>

<style type="text/css">
html,
body {
    height: 100%;
}
.overlay {
    position:absolute;
    display:none; 

    /* color with alpha transparency */
    background-color: rgba(0, 0, 0, 0.7);

    /* stretch to screen edges */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.popup {
    position: absolute;
    width: 300px;
    height: 150px;
    display: none;
    background-color: white;
    text-align: center;

    /* center it ? */
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -75px;
}
</style>
</head>

<body>

<div class="overlay"></div>
<div class="popup">Some popup text</div>
<p>Some content text (click anywhere to toggle overlay)</p>

</body>
</html>

Here is the jquery:

$("body").click(function() {
    $(".overlay").toggle(); // show/hide the overlay
});

Here is the JSFiddle I obtained it from:

http://jsfiddle.net/eohvutps/

Here is my JSFiddle (the code doesn't work in that either so I must have done something wrong.):

enter link description here

Upvotes: 0

Views: 157

Answers (1)

Mark
Mark

Reputation: 4873

You have not included the Jquery library in your fiddle. Have you included in your webpage? If not, this will be your issue.

Upvotes: 1

Related Questions