13

私は jQuery ツールを使用して単純なアラート メカニズムを構築しようとしています。少しの Javascript コードに応答して、メッセージと [OK] ボタンを含むオーバーレイをポップアップし、クリックするとオーバーレイが消えます。些細なこと、またはそうあるべきです。私はhttp://flowplayer.org/tools/demos/overlay/trigger.htmlを惜しみなくフォローしてきましたが、最初に呼び出されたときに正常に動作するものがありますが、そのときだけです。オーバーレイを公開する必要がある JS アクションを繰り返しても、公開されません。

私のコンテンツ/DIV:

<div class='modal' id='the_alert'>
  <div id='modal_content' class='modal_content'>
    <h2>hi there</h2>
    this is the body
    <p>
    <button class='close'>OK</button>
    </p>
  </div>
  <div id='modal_background' class='modal_background'><img src='/images/overlay/f9f9f9-180.png' class='stretch' alt='' /></div>
</div>

そしてJavascript：

function showOverlayDialog() {
$('#the_alert').overlay({
    mask: {color: '#cccccc', loadSpeed: 200, opacity: 0.9}, 
    closeOnClick: false,
    load: true 
});
}

私が言ったように: showOverlayDialog() が初めて呼び出されたとき、オーバーレイは本来あるべきように表示され、[OK] ボタンをクリックすると消えます。しかし、ページをリロードせずに showOverlayDialog() を再度実行しても、何も起こりません。ページをリロードすると、パターンが繰り返されます。最初の呼び出しではオーバーレイが表示されますが、2 回目の呼び出しでは表示されません。

私は明らかに何かが欠けています - そこに何かアドバイスはありますか？ありがとう！

4

1 に答える 1

20

ダイアログを定義し、loadfalseに設定します（ダイアログの自動ロードを無効にします）。

$('#the_alert').overlay({
    mask: {
        color: '#cccccc',
        loadSpeed: 200,
        opacity: 0.9
    },
    closeOnClick: false,
    load: false
});

次に、ダイアログを表示するハンドラーで、load apiメソッドを呼び出します。

$("#show").click(function() {
    $("#the_alert").data("overlay").load();
});

（idがshowオーバーレイを表示する要素にクリックイベントを割り当てます）

ここでの実例：http：//jsfiddle.net/andrewwhitaker/Vqqe6/

問題の原因となっている特定の要素に複数のオーバーレイを定義できるとは思いません。

于 2010-12-31T04:10:24.070 に答える