简单的Javascript和CSS弹出的HTML不工作

Simple Javascript and CSS Popup for HTML not working

本文关键字：HTML 工作 CSS Javascript 简单      更新时间：2023-09-26

这是我的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>

JS: 

$(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>

我仍然只能看到灰色的背景只有

编辑2:我有这个在我的asp内容页面之一。我的主页有

<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>

我仍然只看到灰色的背景

您在编写代码之前没有使用jQuery库，并且您还没有在代码中导入或添加jQuery库。

      $(function(){});

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

看看这个小提琴。

当我把所有的东西都缩小时，我发现弹出窗口在页面的右边偷偷摸摸的。抱歉给你们添麻烦了。进行

下面是一个工作演示。在HTML中添加jQuery: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
相关文章：