web-dev-qa-db-ja.com

Twitterの実装Bootstrap Modal

私はコーディングにかなり慣れていないので、私の経験不足をご容赦ください。

私は現在ウェブサイトの作成に取り組んでおり、ボタンモーダルが欲しいです。私はそれを動作させることができないようで、少なくとも数時間それを実験しました。これは、Twitter Bootstrapサイトから取得したhtmlファイルに書き込んだものです：

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

<div class="modal" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

ここで何かが足りませんか？他に何か追加する必要がありますか？ bootstrapサイトは「javascriptを介してモーダルを呼び出す」と言っていましたが、$（ '＃myModal'）。modal（options）をどこに置くかわかりませんでした。 .htmlと.jsファイルですが、どちらの試みも機能しませんでした。

.htmlファイルにはすでに

<script src="js/bootstrap-modal.js"></script>

他のすべてのプラグインと一緒ですが、これは何もしていないようです。私が自分のコンピューターでローカルに作業していることも注目に値します。

これは非常に簡単な質問だと思いますが、どんな助けでも大歓迎です。

[〜＃〜] edit [〜＃〜]：なんとか機能させることができました。私の問題は、実際にはbootstrap.jsしか持っていなかったのに、bootstrap-modal.jsを調達していたことのように見えました。コードを使用してboostrap-modal.jsという新しいファイルを作成しましたが、正常に機能しました。

ただし、フェードイントランジションを取得することはできません。 bootstrap-transition.jsファイルを使用しましたが、それでもダウンしないようです。追加の助けをいただければ幸いです。

twittertwitter-bootstrap
13
Patrick E.

*フィドルのbootstrapスタイルシートパスを更新しました。この回答を書いたので、変更しました。

プラグインが機能するには、bootstrap-modal.jsスクリプトファイルの前にjQueryスクリプトを含める必要があります。これは、ページに自由に含めることができるgoogles CDNからの直接のスクリプトです。必ず含めてくださいbeforeあなたが持っているかもしれないjs：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

ページの読み込み時にスクリプトを表示する場合にのみスクリプトを呼び出す必要があります。それ以外の場合は、既に持っているモーダルボタンに適切なdata-*属性とhref参照を含める必要があります。

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

Twitter bootstrapデモページにあるのと同じように、コンテンツの読み込みを高速化するために、<body>タグの最後にすべてのスクリプトを含めることができます。

モーダルページのデモは次のとおりです。

http://jsfiddle.net/3v2zg/626/

17
Andres Ilich