Question

我正在尝试在现有页面上创建一个简单的jQuery弹出窗口。页面本身将包含一些文章的第一部分，并在介绍后面有一个更多按钮。我希望更多按钮显示本文其余部分的jQuery弹出窗口。

到目前为止，我一直在关注教程：http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/

然而，一旦它达到共享点，它就不起作用。我点击按钮，没有任何反应。我甚至修改了JS所以它只显示一个警报，但这不起作用。页面和JS之间的链接似乎被打破了。然而，我甚至查看了src（使用我的网络浏览器），并确定脚本标签在那里，但没有JS工作。有什么想法吗？

这是我复制到共享点的html页面（java脚本文件与教程完全相同）：

<!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>
        <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
        <script src="/articles/.../popup.js" type="text/javascript"></script>
        <style type="text/css">
            /* CSS goes here, same as in the tutorial */
        </style>
    </head>
    <body>
        <div>
            <div class="backgroundmain" style="margin-left:-75px; margin-top:-35px; margin-right:-32px;">
            <!-- HTML FOR THE ARTICLES-->
            </div>
            <center>
                <div id="button"><input type="submit" value="Press me please!" /></div>
            </center>
            <div id="popupContact">
                <a id="popupContactClose">x</a>
                <h1>Title of our cool popup, yay!</h1>
                <p id="contactArea">
                    Here we have a simple but interesting sample of our new stuning and smooth popup...
                </p>
            </div>
        </div>
    </body>
</html>

感谢您的帮助，我真的很感激。

编辑：

以下是Chrome开发工具的结果：

js无法加载资源：服务器响应状态为404（未找到）拒绝执行JavaScript脚本。在请求中找到的脚本的源代码。 popup.js：147Uncaught ReferenceError：$未定义

但是我首先在firebug中尝试了这个，发现警报实际上在firefox中有用。

Answer 1

这条线看起来很可疑：

<script src="/articles/.../popup.js" type="text/javascript"></script>

popup.js究竟在哪里？如果您在本地使用它，请确保路径正确。如果不是，则需要指定文件的URL而不是相对路径。

使用jQuery制作弹出窗口

1 个答案: