HTML不起作用的简单Javascript和CSS弹出

Question

这是我的JSfiddle样本，供您参考。

HTML：

<a href='' class="photoclick"><h2><b>Click Here to See Popup! </b></h2></a> <br/>
<div class="popup">
    <div class="content">
        <img src="http://www.ge.com/ar2012/img/close-button-large.png" alt="quit" class="closephoto" id="closephoto" style="width:25px; height:25px"/>
        <p>
        Welcome Welcome Welcome Welcome Welcome Welcome Welcome
        </p>
    </div>
</div>   

联署材料：

$(function(){
    var overlay = $('<div id="photooverlay"></div>');

    $('.closephoto').click(function () {
        $('.popup').hide();
        overlay.appendTo(document.body).remove();
        return false;
    });

    $('.photoclick').click(function () {
        overlay.show();
        overlay.appendTo(document.body);
        $('.popup').show();
        return false;
    });
});

我试着在浏览器上运行，我看到的只是灰色的背景，没有别的。请查查我的小提琴，告诉我怎么回事

编辑:我的主页

<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>

不过，我只能看到灰色的背景

Edit2:我在我的asp内容page.My母版页面上有这个

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
    <script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

不过，我只看到灰色的背景

Answer 1

您错过了在代码之前有一个jQuery库，而且您也没有在小提琴中导入或添加jQuery库。

      $(function(){});

在调用jQuery之前，需要包含它。

看看这个小提琴。

Answer 2

当我放大所有的方式，我发现弹出式潜行在页面的右侧。抱歉，麻烦你们了。继续，继续