hmm i tried your script and it works...altered it with a bind() an it
worked too
no idea sorry
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
.modalbox{
width:100%;
height:100%;
top:0px;
left:0px;
position:absolute;
background:#ededed url(modal_bg.png);
display:none;
z-index:998
}
#info_inner{
width:500px;
padding:15px;
margin:200px auto 0px auto;
background-color:#FFF;
overflow:hidden;
z-index:999
}
#open_info{
cursor:pointer
}
#close{
width:100%;
padding-top:8px;
margin-top:5px;
border-top:#CCC 1px solid
}
#close img{
float:right;
cursor:pointer
}
</style>
</head>
<body>
<a id="open_info">Extra information</a>
<div id="info" class="modalbox">
<div id="info_inner">
Extra information...
<div id="close"><a id="close_info"><img src="close.png" alt="Close
this dialogue box" width="66" height="22" border="0" /></a></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.pack.js"; type="text/
javascript" ></script>
<script type="text/javascript">
$(document).ready(function(){
$('#open_info').bind('click',function(){
$('#info').fadeIn('500')
});
$('#close_info').bind('click',function(){
$('#info').fadeOut('500')
});
});
</script>
</body>
</html>
On Jul 10, 12:17�pm, Mat <matthew_hil...@hotmail.com> wrote:
> I have used this techniques on many other sites before, but for this
> particular one, it's not working. I have no idea, its probably
> something simple, but it remains a mystery and a huge annoyance to me.
>
> You can see the problem athttp://www.matthewhill.name/micro/
> or
> Here is the non-working code (in simple):
>
> XHTML (index.html):
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> <html xmlns="http://www.w3.org/1999/xhtml";>
> <head>
> <title>Title</title>
> <link href="style.css" rel="stylesheet" type="text/css"
> media="screen" />
> </head>
> <body>
> <a id="open_info">Extra information</a>
> <div id="info" class="modalbox">
> � <div id="info_inner">
> � � Extra information...
> � � <div id="close"><a id="close_info"><img src="close.png" alt="Close
> this dialogue box" width="66" height="22" border="0" /></a></div>
> � </div>
> </div>
> <script type="text/javascript" src="global.js"></script>
> </body>
> </html>
>
> CSS (style.css):
>
> .modalbox{
> � � � � width:100%;
> � � � � height:100%;
> � � � � top:0px;
> � � � � left:0px;
> � � � � position:absolute;
> � � � � background:url(modal_bg.png);
> � � � � display:none;
> � � � � z-index:998}
>
> #info_inner{
> � � � � width:500px;
> � � � � padding:15px;
> � � � � margin:200px auto 0px auto;
> � � � � background-color:#FFF;
> � � � � overflow:hidden;
> � � � � z-index:999}
>
> #open_info{
> � � � � cursor:pointer}
>
> #close{
> � � � � width:100%;
> � � � � padding-top:8px;
> � � � � margin-top:5px;
> � � � � border-top:#CCC 1px solid}
>
> #close img{
> � � � � float:right;
> � � � � cursor:pointer
>
> }
>
> JAVASCRIPT (global.js):
>
> $(document).ready(function(){$('#open_info').click(function(){$
> ('#info').fadeIn('500')});$('#close_info').click(function(){$
> ('#info').fadeOut('500')})});
>
> Thanks in advance, Mat.
