2017-04-03 5 views
1

ユーザーがページのメニューボタン、たとえばAboutボタンをクリックするとダイアログボックスが表示され、Webページに関する情報が表示されます。だから、上記の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> 

です私が望むものはポップアップしません。私はJqueryコードで何かを見逃していますか?私のメインのWebページには、次のボタンがあります。

<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の3行目のインクルードをチェックすることができます。

jqueryのCSSファイルもあります。ダウンロードにはダイアログが正しく機能するために必要なアイコンイメージがいくつかあります。

+0

次のスクリプトタグがあります。 まだ動作していません – user3324848

+0

' jquery-ui.css'も追加しましたか? – VDWWD

+0

とし、別のWebサイトから取得する場合は、スクリプトタグに 'http://'を追加する必要があります。 – VDWWD

関連する問題