1

私のスクリプトの意図はmodal、リンクをクリックした後にのみダイアログが表示されるようにすることです。残念ながら、ページが読み込まれるとすぐにポップアップし続けます。jsFiddle と関連するスニペットを含めました。私は何を間違っていますか？

http://jsfiddle.net/rajkumart08/y88WX/25/

jQuery :

$(document).ready(function(){
    $(function() {
        $('#event-modal').modal({
            backdrop: true
        });
    });
});

HTML :

<div id="event-modal" class="modal hide fade">
  <div class="modal-header">
    <a class="close" href="#">x</a>
    <h3>Modal Heading</h3>
  </div>
  <div class="modal-body">
    <p>Some information</p>
  </div>
  <div class="modal-footer">
    <a class="btn primary" href="#">Primary</a>
    <a class="btn secondary" href="#">Secondary</a>
  </div>
</div>
<a href="/events/2-fefewfewfe/rsvps" data-backdrop="true" data-controls-modal="event-modal" data-keyboard="true">click to open model<span class="ico join"></span></a>
4

1 に答える 1

1

まず、$(document).ready(function(){})と$(function(){})は同じものなので、必要なのは 1 つだけです。

次に、モーダル ウィンドウの HTML はデータ属性を使用するため、javascript で呼び出す必要はありません。JavaScriptを削除すると、正常に動作するはずです。

それでもうまくいかない場合は、Bootstrapのドキュメントを読むことをお勧めします。例をコピーして貼り付け、ニーズに合わせてカスタマイズすることもできます。

コードはデータ属性で問題ありませんが、モーダルの閉じるボタンを変更してこれを使用します。

 <a class="close" href="#" onclick="$('#event-modal').modal('hide')">x</a>

次回フィドルを投稿するときは、javascript、CSS、HTML をそれぞれのセクションに分けてください。分解して適切な内容だけに留めると、エラー/バグを早期に発見できる可能性があります。

他のユーザーについては、

Javascript 経由:

コードを変更して、最初から非表示にする次のオプションを追加します。

$(function(){
    $('#event-modal').modal({
        backdrop: true,
        show: false
    });
});

それを表示するには、次の JavaScript を使用します。

$('#event-modal').modal('show');

非表示にするには、次を使用します。

$('#event-modal').modal('hide');
于 2013-03-04T17:57:51.173 に答える