问题描述:

Basically, I would like to show #pagebox when #about is clicked. At the minute #about is a link, I don't know if this affects anything.

The CSS code for #pagebox (#about doesn't have any)

#pagebox{

z-index:99;

background-color:white;

position:fixed;

width:700px;

margin-left:-350px;

margin-top:-300px;

top:50%;

left:50%;

height:600px;

visibility:hidden;

}

and this is the script I used (from another questions answer):

<script language="JavaScript" type="text/javascript">

$(document).ready(function(){

$('#about').on('click', function(){

$('#pagebox').show();

});

</script>

By the way, I don't know if this makes any difference but I'm coding on Tumblr. Thank you all for your help.

网友答案:

You must use display:none; not visibility:hidden; here's a Fiddle

CSS

#pagebox{
  z-index:99;
  background-color:white;
  position:fixed;
  width:700px;
  margin-left:-350px;
  margin-top:-300px;
  top:50%;
  left:50%;
  height:600px;
  display: none;
}

jQuery

$(function() {
  $('#about').on('click', function(){
    $('#pagebox').show('slow');
  });
});

or if you want on/off switch

$(function() {
  $('#about').on('click', function(){
    $('#pagebox').toggle('slow');
  });
});
网友答案:

Ok, I fixed your HTML5 errors, duplicate id's, added alt atributes to images, charset, fixed doctype, closed <head> and bunch of unclosed links but you still have some inline CSS, work on that, please contact me on email [email protected], source is a little big to post it here.

相关阅读:
Top