web-dev-qa-db-ja.com

Bootstrap 3.0 Modal

ハマった。 Bootstrap 3.0がリリースされようとしているので、新しいプロジェクトのためにそれを使用することにしました。これまでのところ順調に進んでいます。 Bootstrap 3.0。

簡単な例はありますか？

twitter-bootstrapmodal-dialogtwitter-bootstrap-3
23
Eric

ドキュメントをビルドしてみてください： Compile Twitter bootstrap 3 docs（How to）？ so http://bassjobsen.weblogs.fm/ explore-and-install-Twitter-bootstrap-3 / ドキュメントから：

  <!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
54
Bass Jobsen

Booststrap 3 Modalに関するすべてのコード例を含むZipをダウンロードできる非常に良い例が見つかりました。

これもあなたのお役に立てば幸いです！

1
Joe

私は同じ問題と闘ってきましたが、この会話のおかげで間違いを見つけました。 TwitterBootstrap3を使用するには、次のものが必要です。

ボタントリガー

<a data-toggle="modal"
   href="#myModal"
   class="btn btn-primary btn-lg"
>Launch demo modal</a>

この最小構造を持つa div：

<div class="modal fade"
     id="myModal"
     tabindex="-1"
     role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
>
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- blah blah content here -->
       </div>
   </div>
</div>

モーダルダイアログとモデルコンテンツを配置しないと、モーダルウィンドウが適切に開かれないことを知っておくことが重要です。

0
mcarra66

simpleDialog を試すことができます。これは単純なbootstrap=モーダルで、コールバックとテンプレートインジェクションオプションがあります。

0
Jithin Vijayan