-3

Rewriting Full Javascript.

Javascript

<div id="PopUp1" style="display: none; color: #FFFFFF;"></div>
<div id="Mask"></div>
<script type="text/javascript">
var Design = '<p>Design!!!!!</p><input type="submit" value="Close" onClick="Close(Design,1)" />';

function PopUp(htmlstring, id) {
    $('#PopUp' + id).fadeIn('slow');
    $('#Mask').fadeIn('slow');
}

function Close(htmlstring, id) {
    $('#PopUp' + id).fadeOut('slow');
    $('#Mask').fadeOut('slow');
}

$('#Mask').click(function () {
    $('#Mask').fadeOut('slow');
    $('#PopUp' + id).fadeOut('slow');
});
</script>

HTML

 <td width="100" align="center" onClick="PopUp(Design,1)">Designs</td>

Now The Mask Shows up with the VAR Design. But The Var isn't showing?

6
  • What errors, if any, are you seeing in the console.log?
    – Xotic750
    May 11, 2013 at 16:26
  • 2
    You are loading jQuery twice. Either use jquery-latest.js or jquery-1.8.3.js but not both. Also, you edited the $s to the code later--does it still not work with them there? Also also, the HTML is invalid: you can't have divs inside a table if they're not inside a td or th.
    – JJJ
    May 11, 2013 at 16:28
  • The TD is inside a table, it's just I copied the line of Coding with the onClick! May 11, 2013 at 16:34
  • Yes, but is the div inside a td?
    – JJJ
    May 11, 2013 at 16:35
  • 1
    How about creating a jsfiddle that demonstrates your problem? And to be honest your updated code/html does not improve our understanding of the problem that you have. You have CSS, HTML and Javascript all mixed in together.
    – Xotic750
    May 11, 2013 at 17:05

3 Answers 3

0

You're using jQuery, except for the $. Also make sure you are including jQuery in your <head>.

function PopUp(htmlstring,id) {
  $('#PopUp'+id).fadeIn('slow');   
  $('#Mask').fadeIn('slow');
}
function Close(htmlstring,id) {
  $('#PopUp'+id).fadeOut('slow');  
  $('#Mask').fadeOut('slow');
}

Also, although this shouldn't matter, use onClick instead of onclick:

<input type="submit" value="Close" onClick="Close(Design,1)" />
6
  • Ah! I was wondering what is the syntax about! BTW: really onClick?? I havent seen it yet.
    – Jan Turoň
    May 11, 2013 at 16:19
  • 2
    No, do NOT use inline onClick when you have jQuery already. Instead assign on("click") in the head on load
    – mplungjan
    May 11, 2013 at 16:29
  • Should I just do a var? For Instance: var Design = '<p>Design!!!</p><br /><input type="submit" value="Close" onClick="Close(Design,1)" />'; May 11, 2013 at 16:32
  • When I Added: var Design = '<p>Design!!!!!</p><input type="submit" value="Close" onClick="Close(Design,1)" />'; .. The Mask Div showed up. May 11, 2013 at 16:37
0

I'm not sure if i understand your problem correctly but if I do, then you want the text, that is inside your variable Design to be shown in your popup.

You setted up your function PopUp with an argument htmlstring, but you never use it. So maybe this would help:

function PopUp(htmlstring, id) {
    $('#PopUp' + id).html(htmlstring);
    $('#PopUp' + id).fadeIn('slow');
    $('#Mask').fadeIn('slow');
}
0

Please consistently use jQuery if you have it and only load it once!!!

Is there any specific reason to use a submit button? If not make it type="button"

<!DOCTYPE html>
<html>
<head>
<title>Test popup</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
function PopUp(htmlstring,id) {
  $('#PopUp'+id).fadeIn('slow');    
  $('#Mask').fadeIn('slow');
}
function Close(htmlstring,id) {
  $('#PopUp'+id).fadeOut('slow');   
  $('#Mask').fadeOut('slow');
}
$(function() {
  $("#closeButton").on("click",function() {
    Close('Design',1); // not sure what htmlstring is 
  });
  $("#openButton").on("click",function() {
    Popup('Design',1); // not sure what htmlstring is 
  });
});
</script>
</head>
<body>
.
.
.
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.