218

私はブートストラップを使用してWebサイトに取り組んでいます。

基本的に、ヒーロー ユニットのボタンによって呼び出されるホームページでモーダルを使用したかったのです。

ボタンコード:

<button type="button" 
    class="btn btn-warning btn-large" 
    data-toggle="modal"
    data-target="#myModal">Open Modal</button>

モーダル コード:

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">In Costruzione</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal: Bootstrap</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
    <button class="btn btn-warning">Salva</button>
  </div>
</div>

問題は、ボタンをクリックするとすぐにモーダルがフェードインし、すぐに消えることです。

助けていただければ幸いです。

また、ドロップダウンの三角形の色を変更する方法 (上向き、ホバーなし)? 私はオレンジと茶色を基調としたウェブサイトに取り組んでいますが、その青色は本当に面倒です。

4

27 に答える 27

498

考えられる原因

これは、Modal プラグインの JavaScript が 2 回読み込まれた場合の典型的な動作です。プラグインが二重にロードされていないことを確認してください。使用しているプラ​​ットフォームによっては、モーダル コードを多数のソースからロードできます。一般的なもののいくつかは次のとおりです。

  • bootstrap.js (完全な BootStrap JS スイート)
  • bootstrap.min.js (上と同じ、縮小しただけ)
  • bootstrap-modal.js (スタンドアロン プラグイン)
  • 依存性ローダー、例えばrequire('bootstrap')

デバッグのヒント

click手始めに、ブラウザーの開発者ツールを使用して、登録済みのイベント リスナーを検査することをお勧めします。たとえば、Chrome は、リスナーを登録するコードが見つかる JS ソース ファイルを一覧表示します。もう 1 つのオプションは、モーダル コードで見つかったフレーズをページのソースで検索することですvar Modal。

残念ながら、これらは常にすべてのケースで物事を見つけるとは限りません。ネットワーク リクエストの検査は、ページにロードされたすべての画像を提供する上で、もう少し堅牢になる可能性があります。

A (壊れた) デモ

これは、 bootstrap.jsとbootstrap-modal.jsの両方をロードしたときに何が起こるかのデモです(経験を確認するためだけに):

プランカー

そのページのソースの一番下までスクロールすると、 bootstrap-modal.js<script>の行を削除またはコメント アウトして、モーダルが期待どおりに機能することを確認できます。

于 2012-12-02T14:57:37.497 に答える
98

私は同じ問題を抱えていましたが、別の原因がありました。ドキュメントに従って、次のようなボタンを作成しました。

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

クリックしても、何も起こらないように見えました。ただし、ボタンは<form>一時的に同じページを取得しているだけでした。

type="button"ボタン要素に追加することでこれを修正し、クリックしたときにフォームを送信しないようにしました。

于 2014-09-11T11:42:39.883 に答える
27

私にとってうまくいったのは削除することでした

data-toggle="modal"

ボタンから。ボタン自体は、リンク、div、ボタンなど、任意の要素にすることができます。

于 2016-09-12T13:28:09.633 に答える
15

この質問に関する他の役立つ回答の後、mvcアプリで重複したブートストラップ参照をしばらく探しました。

ついに見つけました - 私が使っていた別のライブラリに含まれていたので、まったくわかりませんでした! ( datatables.net)。

それでもこの問題が発生する場合は、ブートストラップが含まれている可能性のある他のライブラリを探してください。（datatables.netブートストラップの有無にかかわらずダウンロードを指定できます-他の人も同じです）。

だから私は私のものを削除しbootstrap.min.js、bundle.configすべてうまくいきました。

于 2015-12-22T12:55:23.027 に答える
13

宝石が提供するBootstrapを使用したRailsアプリケーションのコンテキストでの同じ症状と、bootstrap-sass@mervの回答により、私は正しい方向に進みました。

私のapplication.jsファイルには次のものがありました：

//= require bootstrap
//= require bootstrap-sprockets

修正は、2 つの行のうちの 1 つを削除することでした。実際、gem の readme はこのエラーについて警告しています。私の悪い。

于 2015-03-30T12:34:22.907 に答える
9

私も同じ問題を抱えていましたが、モーダルフォーム内に「送信」タイプのボタンがあったために発生していました。私が変更され

    <input  type='submit' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

に

    <input  type='button' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

そして、それは消失の問題を修正しました。

于 2016-05-16T22:50:38.643 に答える
9

私のコードには、bootstrap.min.js が 2 回含まれていました。それらの1つを削除したところ、すべてが正常に機能するようになりました。

于 2015-06-18T07:24:54.847 に答える
8

@gpasse が彼の例で示したのと同じ症状に遭遇しました。これが私のコードでした...

<form...>
  <!-- various inputs with form submit --->

  <!-- button opens modal to show dynamic info -->
  <button id="myButton" class="btn btn-primary">Show Modal</button>
</form>

<div id="myModal" class="modal fade" ...>
</div>

<script>
  $( '#myButton' ).click( function() {
    $( '#myModal' ).modal();
  )};
</script>

@Bhargavが示唆したように、私の問題は、フォームを送信しようとするボタンとページのリロードが原因でした。<a>次のようにボタンをリンクに変更しました。

<a href="#" id="myButton" class="btn btn-primary">Show Modal</a>

...そして、問題を修正しました。

注: 単にコメントを追加したり、賛成票を投じたりするだけの評判はまだありません。少し説明を加えることができると感じました。

于 2015-03-18T18:51:22.613 に答える
8

この問題は、jquery を使用してイベント リスナーを 2 回アタッチした場合にも発生する可能性があります。たとえば、バインドを解除せずに設定します:

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal('toggle')
            })

これが発生すると、イベントが 2 回連続して発生し、モーダルが消えます。

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal()
                $("#fixerrormodal").modal('toggle')
            })

例を参照してください: http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

于 2014-08-26T09:33:23.937 に答える
3

私の場合、bootstrap.js、jquery.js ファイルが 1 つしか含まれていませんでしたが、そのようなタイプのエラーが発生し、ボタンのコードは次のようになりました。

<script type="text/javascript">
$(document).ready(function(){
   $("#bttn_<?php echo $rnt['id'];?>").click(function(){
      $("#myModal_<?php echo $rnt['id'];?>").modal('show');
   });
});
</script>

私は単純にe.preventDefault();を追加しました。それに、それは魅力のように機能しました。

したがって、私の新しいコードは次のようになりました。

<script type="text/javascript">
$(document).ready(function(){
  e.preventDefault();
  $("#bttn_<?php echo $rnt['id'];?>").click(function(){
     $("#myModal_<?php echo $rnt['id'];?>").modal('show');
  });
});
</script>
于 2015-06-17T08:20:03.223 に答える
1

私も同じ問題を抱えていました。私の問題は、リンクを押すとモーダルを表示し、jqueryで確認を求めていたことです。

以下のコードはモーダルを表示し、すぐに消えました:

<a href="" onclick="do_some_stuff()">Hey</a>

href に「#」を追加して、リンクがどこにも行かないようにして、問題を解決しました。

<a href="#" onclick="do_some_stuff()">Hey</a>
于 2016-04-28T15:56:04.773 に答える
1

モバイルデバイスでのテスト中に同じ問題に直面していましたが、このトリックがうまくいきました

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a>

ボタンをアンカータグに変更すると機能するはずです。送信しようとしているボタンのタイプが原因で問題が発生するため、モーダルがすぐに消えます。また、モーダルから非表示を削除 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> します。

于 2015-03-04T12:47:21.270 に答える
1

私の場合、CDN を application.html.erb の head に含め、「jquery-rails」gem もインストールしました。これは、上記のドキュメントと投稿のおかげで冗長であると推測しています。

application.html.erb の先頭から CDN (以下) をコメントアウトするだけで、モーダルは適切に開いたままになります。

<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->
于 2015-05-11T22:03:07.977 に答える
1

asp.NETを使用したプロジェクトで同じ問題が発生しました。Bootstrap 3.1.0を使用していたので、Bootstrap 2.3.2にダウングレードして解決しました。

于 2014-05-19T01:20:36.400 に答える
1

ボタンが内部にある場合、私も問題を抱えていましたタグを付けると、モーダルが一度表示され、すぐに消えて、ボタンをフォームから外して問題を修正しました。おかげさまでこのスレにたどり着きました！すべてに+1。

于 2014-11-11T10:48:24.950 に答える
0

以下に示すように、モーダルを2回切り替えていたため、同じ問題が発生しました。

statusCode: {
    410: function (request, status, error) { //custom error code

        document.getElementById('modalbody').innerHTML = error;
        $('#myErrorModal').modal('toggle')
    }
},
error: function (request, error) {

    document.getElementById('modalbody').innerHTML = error;
    $('#myErrorModal').modal('toggle')
}

次のうち 1 つを削除しました。

$('#myErrorModal').modal('トグル')

そしてそれは魔法のように働きました！

于 2020-02-25T08:28:46.640 に答える
0

bootstrap経由でプロジェクトに追加した後、ファイルbowerをインポートし、bootstrap.min.jsファイルの後にインポートしましたmodal.js。(モーダルを開くボタンはフォーム内にあります)。のインポートを削除するだけで、modal.jsうまくいきます。

于 2018-01-28T17:20:54.547 に答える
0

これが古いことは承知していますが、もう 1 つチェックすべき点があります。data-target= 属性が 1 つしかないことを確認してください。私はそれを複製しましたが、結果はこのスレッドのとおりでした。

于 2017-09-12T00:27:54.780 に答える