How can I write this in jQuery?

Question

Hi, Guys,

There is two links in my body part: but i want to give them jquery touch, as I am a beginner to jquery, not able to get it done can you help?

click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a>

on clicking above link, it'll call following css and give the lightbox effect.

<div id="light" class="white_content">Please wait as process is going on..<img src="images/ajax-loader(2).gif" />
 <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
</div>
<div id="fade" class="black_overlay"></div>

llly on clicking close it'll close the lightbox.

In my head part jquery code is like this:(document.ready() written, #btn_submit- button id.) .....

$("#btn_submit").bind('click', function(){
           //How can i write first anchor tags click in this?
      )};

All I just want to know how to write anchor tags onclick part in jquery.

I'll really appreciate your help. Thank you in advance.

Answer 1

For this:

click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a>

You can write jquery code like:

$("#show").bind('click', function(){
  $('#light').css('display', 'block');
  $('#fade').css('display', 'block');
  return false;
)};

And for this:

<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>

You can write jquery code like:

$("#hide").bind('click', function(){
  $('#light').css('display', 'none');
  $('#fade').css('display', 'none');
  return false;
)};

So after your add jQuery code, your both links should appear like this:

<a href="#" id="show">Click here to show</a>
<a href="#" id="hide">Click here to hide</a>

More Info:

• http://api.jquery.com/css/