Amjath Amjath - 1 month ago 18
Javascript Question

Simple Javascript and CSS Popup for HTML not working

Here is my JSfiddle sample for your reference.

HTML:

<a href='' class="photoclick"><h2><b>Click Here to See Popup! </b></h2></a> <br/>
<div class="popup">
<div class="content">
<img src="http://www.ge.com/ar2012/img/close-button-large.png" alt="quit" class="closephoto" id="closephoto" style="width:25px; height:25px"/>
<p>
Welcome Welcome Welcome Welcome Welcome Welcome Welcome
</p>
</div>
</div>


JS:

$(function(){
var overlay = $('<div id="photooverlay"></div>');

$('.closephoto').click(function () {
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});

$('.photoclick').click(function () {
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
});
});


I tried running on browser, all I see is the grey out background nothing else.
Please check my jsfiddle and tell me what's the issue

Edit: MY master page has

<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>


still i can see only gray background only

Edit2: I have this on one of my asp Content page.My master page has

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


Still I see only grey background

SSS SSS
Answer

You missed having a jquery library before the code. And you have not imported or added a juery library in the fiddle itself.

      $(function(){});

will need jquery included before its called.

check this fiddle http://jsfiddle.net/hwDGX/4