Using jQuery to make a popup_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-19 14:32 出处：网络

I\'m trying to make a simple jQuery popup on an existing page. The page itself will have the first part of some articles, with a more button following the intro. I would like the more button to displa

I'm trying to make a simple jQuery popup on an existing page. The page itself will have the first part of some articles, with a more button following the intro. I would like the more button to display a jQuery popup with the rest of the article.

So far, I've been following the tutorial: http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/

However once it's up on share point, it doesn't work. I click the button and nothing happens. I even modified the JS so开发者_Go百科 all it does it display an alert, but that doesn't work ether. The link between the page and JS seems to be broken. However I even viewed the src (using my web browser) and sure enough the script tag is in there, but nothing JS is working. Any ideas?

Here's the html page I copy into share point (the java script file is exactly the same as in the tutorial):

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

Thanks for all your help, I really appreciate it.

EDITS:

Here's the results from Chrome's dev tools:

jsFailed to load resource: the server responded with a status of 404 (NOT FOUND) Refused to execute a JavaScript script. Source code of script found within request. popup.js:147Uncaught ReferenceError: $ is not defined

However I first tried this in firebug and discovered the alert actually works in firefox.

This line looks suspect:

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

Where exactly is popup.js? If you have it locally, make sure the path is correct. If not you will need to specify the URL to the file and not a relative path.