2017-04-03 84 views
1

所以我試圖實現一個對話框,當用戶點擊我的頁面上的菜單按鈕時彈出,例如關於按鈕,它將顯示有關網頁的信息。所以,我已經爲上述實現了一個jquery函數和一個ascx頁面。asp.net web項目的JQuery對話框

$(document).ready(function() { 
    $('#aboutButton').click(function(event) { 
     alert("Thanks for visiting!");//testing 
     $(function() { 
     $("#aboutButtonDiv").load('aboutButton.ascx'); 
     $("#aboutButtonDiv").dialog({ 
      backdrop: 'static', 
      draggable: false, 
      position: { 
       my: "center top", 
       at: "center top+100", 
       of: window 
      }, 
      dialogClass: "no-close",    
      resizable: false, 
      height: 'auto', 
      width: 500, 
      modal: true, 
      buttons: { 
       "OK": function() { 
       $(this).dialog("close"); 
       } 
      } 
      }) 
     }) 
    }) 
    $(".menu-close").hide(); 
}); 

我的ascx代碼是一個簡單的div標籤

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="aboutButton.ascx.cs" Inherits="WebProj.aboutButton" %> 
<!DOCTYPE html> 
<html> 
<body> 
    <div id="aboutButtonDiv" title="About"> 
     <p>Hello this is my first dialog using JQuery</p> 
    </div> 
</body> 

當我點擊按鈕的Click事件被解僱(我可以看到訪問消息的感謝),但該對話框我想要的不會彈出。我在jquery代碼中丟失了些什麼。在我的主頁面中,我有以下按鈕

<li class="menutab-list"> 
    <a href="#" type="link" id="aboutButton" data-toggle="modal" data-target="#modalAbout"> 
     <span class="listing-text">About</span> 
    </a> 
</li> 

回答

0

當我測試它時,您的代碼正常工作。所以它可能與丟失jQuery UI文件或其中的一部分有關。

爲了使對話框起作用,您需要使用jQuery UI庫。即使你有這個可能是它缺少特定的對話框部分。

轉到http://jqueryui.com/download/並通過選擇您需要的選項創建您的下載或下載完整軟件包。你可以在jquery-ui.js的第三行檢查包含哪些部分。

還有一個jQuery的css文件,以及一些圖標圖像在下載,也需要對話框正常工作。

+0

我有以下腳本標記 仍不能正常工作 – user3324848

+0

您是否也添加了'jquery-ui.css'? – VDWWD

+0

,如果你想從另一個網站獲取它,你需要在腳本標籤中加入'http://'。 – VDWWD