12

Ajaxを使ってモーダルウィンドウ内に何か挿入したいので、モーダルウィンドウを手動で開いてみました。コードは次のようになります

    $(function(){
        $('#modal-from-dom').modal({
            backdrop: true,
            keyboard: true
        });
        $('#modalbutton').click(function(){

            $('#my-modal').bind('show', function () {
                // do sth with the modal
            });
            $('#modal-from-dom').modal('toggle');

            return false;
        });
    });

HTML はブートストラップ js ページから直接コピーされます

<div id="modal-from-dom" class="modal hide fade">
    <div class="modal-header">
      <a href="#" class="close">×</a>
      <h3>Modal Heading</h3>
    </div>
    <div class="modal-body">
      <p>One fine body…&lt;/p>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn primary">Primary</a>
      <a href="#" class="btn secondary">Secondary</a>
    </div>
</div>
<button id="modalbutton" class="btn">Launch Modal</button>

したがって、問題は、最初にボタンをクリックすると問題なく動作するように見え、2 回目のクリックでモーダル ウィンドウが 1 秒ほど表示されてから消えることです。「トグル」を「表示」に変更すると、2 回目のクリック後に背景が完全にフェードアウトしなくなります。どうすればこれをデバッグできますか?

4

4 に答える 4

2

現在アクションを実行している方法がちらつきの原因である可能性があります。基本的に、ブラウザに伝えているのは、divが表示された後にコンテンツを更新することです。また、リンクがクリックされるたびにonShowイベントをバインドするようにjQueryに指示しています。そのバインド宣言は、onClickイベントの外部で行う必要があります。

試してみる必要があるのは、表示する前にモーダルコンテンツを変更し、ブラウザが表示する前にDOMを適切に調整できるようにして、ちらつきを減らすことです（解消しない場合）。

次のようなものを試してください。

$(function(){
    $('#modal-from-dom').modal({
        backdrop: true,
        keyboard: true
    });
    $('#modalbutton').click(function(){

        // do what you need to with the modal content here

        // then show it after the changes have been made

        $('#modal-from-dom').modal('toggle');
        return false;
    });
});
于 2012-02-13T01:10:41.283 に答える