使用jQuery製作彈出式窗口

我試圖在現有頁面上製作一個簡單的jQuery彈出窗口。該頁面本身將具有一些文章的第一部分，在介紹之後有更多按鈕。我希望更多的按鈕顯示一個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>

感謝您的幫助，我真的很感激。

EDITS：

下面是Chrome的開發工具的結果：

jsFailed加載資源：服務器與404狀態響應（未找到）拒絕執行一個JavaScript腳本。在請求中找到腳本的源代碼。 popup.js：147未引用錯誤：$未定義

但是，我第一次嘗試在螢火蟲中發現該警報實際上在Firefox中起作用。

來源

2011-07-12 COB-CSU-AM

使用Firebug或Chrome開發工具（或IE開發工具，如果你絕望的話）打開它並查看是否有任何Javascript錯誤。如果有，那麼Javascript的其餘部分將不起作用。當你這樣做時發佈你的發現。 – MoarCodePlz

第一步是嘗試加載頁面並在可以獲得完整錯誤信息的環境中單擊該按鈕。例如，在運行Firebug的Firefox中，或者在Chrome中使用開發人員工具。使用工具（例如Firefox的Web Developer Toolbar）也是值得的，它可以讓你查看頁面的呈現源，這樣你就可以看到Sharepoint是否正在改變源代碼中的某些東西，這正在破壞這一點。 –

由於您使用JQuery，因此使用FireBug或其他開發人員控制檯的替代方法將使用[jquery lint]（http://james.padolsey.com/javascript/jquery-lint/）。 – lxa

這行看起來可疑：

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

到底在哪popup.js？如果您在本地使用，請確保路徑正確。如果不是，則需要指定文件的URL而不是相對路徑。

來源

2011-07-12 21:23:36

使用jQuery製作彈出式窗口

回答

相關問題