ブートストラップモーダルはすぐに消えます

ブートストラップを使用してウェブサイトで作業しています。

基本的に、私はヒーローユニットのボタンで呼び出されるホームページでモーダルを使用したいと思いました。

ボタンコード：

<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>

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

私はどんな助けにも感謝します。

また、ドロップダウン三角形の色を変更する方法（上向き、ホバーなし）？私はオレンジとブラウンをベースにしたウェブサイトに取り組んでいます、そしてその青いものは本当に迷惑です。

考えられる原因

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

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

デバッグのヒント

まずclick、ブラウザーの開発者ツールを使用して、登録されたイベントリスナーを検査することをお勧めします。たとえばChromeは、リスナーを登録するコードが見つかるJSソースファイルをリストします。別のオプションは、モーダルコードで見つかった語句をページ上のソースで検索することです。たとえば、var Modal。

残念ながら、これらは常にすべてのケースで何かを見つけるわけではありません。ネットワーク要求の検査は、ページにロードされたすべての画像を提供することで、もう少し堅牢になります。

A（壊れた）デモ

以下は、bootstrap.jsとbootstrap-modal.jsの両方をロードしたときに何が起こるかを示すデモです（体験を確認するためだけです）。

プランカー

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

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

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

クリックすると何も起こらないようです。ただし、ボタンは<form>一時的に同じページをフェッチしているにありました。

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

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

data-toggle="modal"

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

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

最後にそれを見つけました-私が使用していた別のライブラリに含まれていたので、まったくわかりませんでした！（datatables.net）。

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

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

同じ症状、bootstrap-sassgem によって提供されるBootstrapを使用するRailsアプリケーションのコンテキストで、@ mervの答えは正しい方向に進んでくれました。

私のapplication.jsファイルには以下が含まれていました：

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

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

私のコードには、どういうわけかbootstrap.min.jsが2回含まれていました。そのうちの1つを削除したところ、すべて正常に動作しました。

e.preventDefault(); jquery ui

私にとってこの問題は、jquery uiボタンのクリックメソッドのオーバーライドで発生し、デフォルトでクリック時にページがリロードされました。

この問題は、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

@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>

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

注：コメントや賛成票を追加するだけの評判はまだありません。少し説明を追加できると思いました。

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

    <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.'/>

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

私の場合、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>

私は本日この問題に出くわしましたが、たまたまChromeでのみ発生しました。レンダリングの問題かもしれないと気づいたのはなぜですか。特定のモーダルを独自のレンダリングレイヤーに移動することで解決しました。

#myModal {
  -webkit-transform: translate3d(0, 0, 0);
}

私の場合、ボタンをクリックすると、ページが（不要に）リロードされます。

これが私の修正です：

<button class="btn btn-success" onclick="javascript: return false;" 
data-target="#modalID" data-toggle="modal">deaktivieren</button>

私の場合actionlink、MVCでボタンを使用していて、この問題に直面しています。上記やその他の多くの解決策を試しましたが、それでもその問題に直面した後、コードにエラーが発生しました。

私は使用してJavaScriptでモーダルを呼び出しました

 $('#ModalId').modal('show');

エラーの前にこのボタンを使用しました

<a href="" onclick="return Edit();" class="btn btn-primary">Edit</a>

このボタンにはhrefプロパティの値がないため、問題に直面しています。

次に、このボタンコードを次のように編集します

 <a href="#" onclick="return Edit();" class="btn btn-primary">Edit</a>

その後、最初の＃に＃がないため、問題は単にエラーを解決します。

これが役立つかどうかを確認してください。

さらに別の原因/解決策！私のJSコードにありました：

$("#show_survey").click(function() {
  $("#survey_modal").modal("show")
})

しかし、私のHTMLコードはすでに次のように記述されています。

<a class="small-text link" data-target="#survey_modal" data-toggle="modal" href="#" id="show_survey">Take a quick 7 question survey!</a>

したがって、これは、重複がコードに入り、モーダルを開いてから閉じる方法の別の順列です。私の場合、data-targetそしてdata-toggleBootstrapによるhtmlのドキュメントでは、モーダルが機能するようにトリガーしています。したがって、JSコードは冗長であり、削除すると機能します。

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

私も問題がありました。ボタンが タグを付けると、モーダルが一度表示されてすぐに消え、ボタンをフォームから取り出して問題を修正しました。おかげで私はこのスレッドに行きました！+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"> ます。

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

application.html.erbの先頭からCDN（下記）をコメントアウトしただけで、モーダルは開いたままになります。

<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->

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

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

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

私はhrefに「＃」を追加して、リンクがどこにも移動しないようにして、問題を解決しました。

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

削除してみましたか

data-dismiss="modal"

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

をbootstrap介してプロジェクトに追加した後、ファイルbowerをインポートしたbootstrap.min.js後、modal.jsファイルをインポートしました。（モーダルを開くボタンはフォーム内にあります）。インポートを削除するだけmodal.jsで機能します。

データテーブルでcodeigniter 3ブートストラップを使用している場合。

以下はconfig / ci_boostrap.phpの私の修正です

//'assets/dist/frontend/lib.min.js',
//lib.min.js has conflict with datatables.js and i removed it replace with jquery.js
'assets/dist/frontend/jquery-3.3.1.min.js',
'assets/dist/frontend/app.min.js',
'assets/dist/datatables.js'

同じ問題に直面しなければならなかった。理由はと同じ@mervです。問題は、ページに追加されたカレンダーコンポーネントにありました。コンポーネント自体が、カレンダーポップアップで使用されるモーダル機能を追加します。

したがって、モデルポップアップを解除する理由は、次の1つ以上です。

• 複数のブートストラップjsバージョン/ファイルのロード（縮小...）
• ブートストラップを使用するページに外部カレンダーを追加する
• ページにカスタムアラートまたはポップアップライブラリを追加する
• ポップアップ動作を追加するその他のライブラリ

Angular（5）を使用している間、同じ問題に直面しますが、私の場合は次のように解決しました：

component.html

<button type="button" class="btn btn-primary"  data-target="#myModal" 
(click)="showresult()">fff</button>

<div class="modal" id="myModal" role="dialog"  tabindex="-1" data-backdrop="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

component.ts

注：jqueryを「declare var $：any;」としてtsファイルにインポートする必要があります。

  showresult(){
    debugger
    $('#myModal').modal('show');
  }

私が行った変更：

• Buttonタグから「data-toggle = "modal"を削除しました（@miCRoSCoPiC_eaRthLinGのおかげで、この回答が役立ちます）。この場合、モーダルを表示するため、作成しました（クリック）= "showresult（）"

• 内部のcomponent.tsはJquery（$）を宣言する必要があり、内部のボタンクリックメソッドshowresult（）は「$（ '＃myModal'）。modal（ 'show'）;」を呼び出します。

以下に示すように、モーダルを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（ 'toggle'）

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