jQueryの簡単なダイアログボックス

<link href="simpledialog.css" type="text/css" rel="stylesheet" /> 
<script type="text/javascript" src="simpledialog.js"></script> 



<script type="text/javascript"> 



$(document).ready(function() { 
$('.simpledialog').simpleDialog(); 
}); 
$(document).ready(function() { 
$('.simpledialog').simpleDialog({ 
opacity: 0.3, 
duration: 500, 
title: 'Simple Dialog', 
open: function (event) { 
    console.log('open!'); 
}, 
close: function (event, target) { 
    console.log('close!'); 
} 
}); 
});

jQueryの簡単なダイアログボックス

$strLink = "<a href='viewTicket.php?id={$row['id']}' class='simpledialog'>$strName</a>"; 



<a href="#" rel="dialog_content" class="simpledialog">show dialog!</a> 

<!-- content --> 
<div id="dialog_content" style="display:none;"> 
<h3>DEMO</h3> 
<p>This is a demonstration of jQuery SimpleDialog.</p> 
<a href="#" class="close">close</a> 
</div> 

echo "<td>" . $strLink . "</td>";

私はそれが任意の助け

感謝をjqueryのをトリガされていないリンクをクリックしたとき！

出典

2011-08-14 user892239

あなたはすべてのエラーを得ている：以下は、私の作品の完全な出力htmlがあります。また、それを2度定義しました。オプションをつけて1回、それを使わないで1回。 javascriptがロードされていることを確認してください（エラーがあるかどうかを確認してください）。 – Matt

は、これをデバッグするためにこれをチャットに移動する必要があるかもしれません。 – Matt

より良いことには、position:absoluteでいくつかのdivを作成し、それを表示するだけです。

function showDialog() { $('#box').fadeIn(250); $('#box').fadeTo(0.5); } 
function hideDialog() { $('#box').fadeOut(250); }

あなたはそれを呼び出すことができます：オープン

とCSSをあなたがそれを必要とする場合：

#box { 
    position: absolute; 
    top: 100; 
    left: 100; 
    width: 100px; 
    height: 100px; 
    display: none; 
}

出典

2011-08-14 11:27:10

それだけでなく、彼もajaxの例があります。もう1つはポジショニングですが、左右または上下にスクロールさせるかどうかは、おそらく中心にしたいと思うかもしれません。 – Matt

基本的には、さらに多くの機能を追加することができます。基本的に、私はこれを使って関数呼び出しを優先します。それがどこでどのように呼び出されるのかを知るのは簡単です。そして、デバッグするesear。 –

ありがとうございました！私はそれが画面上に表示することができないように今は、位置付けが問題であるとは思わない？ – user892239

まず、明白な疑問：あなたはjQueryのが含まれていましたか？ jQueryの拡張機能として、simpleDialogはjQueryに依存して動作します。これを固定するだけで、ダイアログが表示されますが、ダイアログ自体が壊れてしまいます。
セカンダリのように、simpleDialogはリンクで動作します。この瞬間（v0.1.1）は、同じリンク上で2回それを2度呼び出すことは、いいえではないようです。したがって、2つのリンクを作成し、各リンク上でsimpleDialogを1回だけ呼び出すようにします。
最後に、問題がまだ残っている場合は、これがクライアント側の問題であるため、ここではクライアント側のコードのみが重要です。あなたのPHPが正しいhtmlを生成していることを確認してください。 cssとjsが実際にロードされていることを確認します（正しい場所などで）。

<!DOCTYPE html><html><head> 
    <link href="css/jquery.simpledialog.css" type="text/css" rel="stylesheet" /> 
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'> </script> 
    <script src="js/jquery.simpledialog.js" ></script> 
</head><body> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $('.simpledialog1').simpleDialog(); // Default usage 
    }); 
    $(document).ready(function() { // Usage with more parameters 
    $('.simpledialog2').simpleDialog({ 
     opacity: 0.7, // Modified parameter to make it different from default 
     duration: 1000, 
     title: 'Simple Dialog', 
     open: function (event) { 
     console.log('open!'); 
     }, 
     close: function (event, target) { 
     console.log('close!'); 
     } 
    }); 
    }); 
</script> 

<a href="#" rel="dialog_content" class="simpledialog1">show default dialog!</a> 
<a href="#" rel="dialog_content" class="simpledialog2">show slower dialog!</a> 

<!-- content --> 
<div id="dialog_content" style="display:none;"> 
    <h3>DEMO</h3> 
    <p>This is a demonstration of jQuery SimpleDialog.</p> 
    <a href="#" class="close">close</a> 
</div> 

</body></html>

出典

2011-08-14 12:08:43 Sheepy

jQueryの簡単なダイアログボックス

答えて

関連する問題