30

私は単純なブートストラップのモーダル サンプルを機能させようとしています。このドキュメントに従っています。モーダル要素 ID に対応する ..." ですが、できる限りのことを行いましたが、膨大な量の調査を行った結果、この単純なモーダルを機能させることができませんでした。

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

私はこれのいずれかを持っています:

<a class="btn" data-controls-modal="myModal">Launch Modal</a>

またはこれ：

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

ボタンを押してモーダルを有効にします。ページにも bootstrap-modal.js をロードしました。「Launch Modal」クリック イベントを処理する JavaScript 行を追加しない限り、「Launch Modal」をクリックしても何も起こりません。

4

13 に答える 13

27

私はついに「Sven」からこの解決策を見つけ、問題を解決しました。私がしたことは、「bootstrap.min.js」を次のように含めたことです。

<script src="bootstrap.min.js"/>

それ以外の：

<script src="bootstrap.min.js"></script>

本当に奇妙に見えた問題を修正しました。誰でも理由を説明できますか？

于 2012-05-17T10:11:43.857 に答える
24

Fiddle 1 : Twitter ブートストラップ サイトで使用されているモーダルのレプリカ。(これはデフォルトでは表示されないモーダルですが、デモ ボタンをクリックすると起動します。)

http://jsfiddle.net/9RcDN/

Fiddle 2 : ブートストラップのドキュメントに記載されているモーダルのレプリカですが、javascript の使用を避けるために必要な要素が組み込まれています。特に、div にhideクラスが含まれていること、および[閉じる] ボタンで が使用されていることに注意してください。#myModaldata-dismiss="modal"

http://jsfiddle.net/aPDVM/4/

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


<div class="modal hide" id="myModal"><!-- note the use of "hide" class -->
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…&lt;/p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a><!-- note the use of "data-dismiss" -->
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​

公式の Twitter ブートストラップ サイトが 2.0.3であるのに対し、使用しているサイトはブートストラップ 2.0 で実行されていることにも注意してください。

于 2012-05-12T03:43:30.730 に答える
17

Also have a look at BootBox, it's really simple to show alerts and confirm boxes in a bootstrap modal. http://bootboxjs.com/

The implementation is as easy as this:

Normal alert:

bootbox.alert("Hello world!");

Confirm:

bootbox.confirm("Are you sure?", function(result) {
  Example.show("Confirm result: "+result);
});

Promt:

bootbox.prompt("What is your name?", function(result) {                
      if (result === null) {                                             
        Example.show("Prompt dismissed");                              
      } else {
        Example.show("Hi <b>"+result+"</b>");                          
      }
});

And even custom:

    bootbox.dialog("I am a custom dialog", [{
    "label" : "Success!",
    "class" : "btn-success",
    "callback": function() {
        Example.show("great success");
    }
}, {
    "label" : "Danger!",
    "class" : "btn-danger",
    "callback": function() {
        Example.show("uh oh, look out!");
    }
}, {
    "label" : "Click ME!",
    "class" : "btn-primary",
    "callback": function() {
        Example.show("Primary button");
    }
}, {
    "label" : "Just a button..."
}]);
于 2013-07-31T21:49:52.240 に答える
5

私もこの問題に遭遇します。私はbootstrap.jsとbootstrap-modal.jsを含めていました。すでに bootstrap.js がある場合は、ポップオーバーを含める必要はありません。

于 2012-05-16T14:12:36.473 に答える
1

私にとって、ボタンタグをクリックすると、ブートストラップモーダルが表示されたり消えたりしていました（マークアップでは、モーダルはデータ属性のみを使用して表示および非表示になっています）。gulpfile.js に、bootstrap.js (モーダル ロジックを含む) と modal.js ファイルを追加しました。したがって、ブラウザーが両方のファイルを解析して実行した後、2 つのクリック イベント ハンドラーが特定の dom 要素 (ファイルごとに 1 つ) に関連付けられているため、1 つがモーダルを表示し、もう 1 つがモーダルを非表示にすると思います。これが誰かに役立つことを願っています。

于 2016-09-20T22:05:40.260 に答える
0

また、

Visual Studio からページを実行していて、ブートストラップ パッケージをインストールしている場合は、2 つのことを確認する必要があります。

  1. Bootsrap Modal Dialog パッケージも取得していること (非常に重要)
  2. バンドルを使用している場合は、bundle.config に追加しました。
于 2015-02-08T01:47:10.493 に答える
0

p タグをスキップするか、h3 タグなどに置き換えてみてください。交換：

<p>One fine body…&lt;/p>

と

<h3>One fine body…&lt;/h3>

理由はわかりませんが、 p タグは Bootstrap の一部のバージョンと完全に互換性がないようです。

于 2012-12-16T21:25:55.833 に答える
-1

トリガーするには、Bootstrap jQuery プラグインを呼び出す必要があります。

于 2015-10-03T09:30:05.283 に答える
-1 
<div class="modal fade bs-example-modal-lg" id="{{'modal'+ cartModal.index}}">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"  aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
          <div class="col-lg-6" >
            <p class="prodTitle" ng-bind="(cartModal.product.p_name|uppercase)"></p>
            <p class="price-para">
              <span class="currency-cls" ng-bind="cartModal.product.c_currency"></span>
              <span class="price-cls" ng-bind="cartModal.product.p_price"></span>
            </p>
            <p class="select-color">
              <span ng-repeat="color in cartModal.product.p_available_options.colors">
                <button id="color-style" ng-click="cartModal.saveColor(color)" ng-style="{'background-color':color.hexcode}"></button>
              </span>
            </p>
            <br>
            <p class="select-box">
              <span class="size-select-cls">
                SIZE:<select ng-init="items=cartModal.product.p_available_options.sizes" ng-model="cartModal.selectedSize" ng-options="item.code as
                item.name for item in items"></select>
              </span>
              <span class="qty">
                QTY:<input type="number"  min="1" ng-model="cartModal.selectedQty"/>
              </span>
            </p>
            <p class="edit-button">
              <button class="btn-primary btn-lg" data-dismiss="modal" ng-click="cartModal.save();cartModal.calculate()">EDIT</button>
            </p>
          </div>
          <div class="col-lg-6">
            <img ng-src="{{cartModal.product.imageSrc}}">
          </div>
      </div>
    </div>
  </div>
</div>
于 2016-11-19T07:22:31.547 に答える