Question

我无法使我的图像“30off”打开背景图像和背景图像上的另一个图像，我遇到问题后出现问题，由于某种原因无法将30off图像移到左边无论我使用哪种箱型号 HTML和脚本：

    <html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<meta charset="utf-8">
<title>TESTGROUNDS</title>

</head>
<body>
<div id="30offdiv">
<img id="30off" src="40off.jpg" width="140" height="80">
</div>
 <div id="sunbgdiv">
 <img id="sunbg" src="sunbg.gif" style="display:none;" width="100%">
</div>
 <div id="ytpaddiv">
 <a href="http://www.google.com"><img id="ytpad" src="YTPad.png" width="1200" height="482" style="display:none;"></a> 
</div>
<div id="xbtndiv">
  <img id="xbtn" src="close2.png" width="64" height="38" style="display:none;">
</div>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <P> testtesttesttest12312312testtesttest123123</P>
    <p>carcar</p>
    <p> </p>
    <script src="jquery-1.12.2.js"></script>
    <!-- Fade out Script -->
    <script>
    $(function(){

        $('#30off').on('click', function() {
         $('#sunbg').fadeIn();
        })

        $('#30off').on('click', function() {
         $('#ytpad').fadeIn();
        })

        $('#30off').on('click', function() {
         $('#xbtn').fadeIn();
        })

        $('#xbtn').on('click', function() {
         $('#xbtn').fadeOut();
        })

        $('#xbtn').on('click', function() {
         $('#sunbg').fadeOut();
        })

        $('#xbtn').on('click', function() {
         $('#ytpad').fadeOut();
        })


    });
    </script>

</body>
</html>

CSS：

 body {
    background-color:#0FF;
}

#30off
{
    position: fixed;
    left: 30%;
    width: 30%;
}

#xbtndiv{
    position:fixed;
    top: 34%;
    left: 14%;
}

#ytpaddiv{
    position:fixed;
    top: 34%;
    left: 14%;
}

#sunbgdiv{
    position: fixed;
    width: 100%;
    height: 100%;
    top: -2px;
    left: -1px;
}

Stacks没有正确显示代码

如何使用JQuery控制后台弹出窗口

0 个答案: