web-dev-qa-db-ja.com

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

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

基本的に、私はホームページでモーダルを使用したいと思いました。そして、英雄ユニットのボタンによって召喚しました。

ボタンコード：

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

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

どうぞよろしくお願いします。

また、ドロップダウントライアングルの色を変更する方法（上向き、ホバーなし）私はオレンジとブラウンを基にしたウェブサイトを制作していますが、その青いことは本当に厄介です。

twitter-bootstrapmodal-dialog
189
gorokizu

考えられる原因

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

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

デバッグのヒント

まずはブラウザの開発者ツールを使って登録済みのclickイベントリスナを調べるのがいいでしょう。たとえばChromeは、リスナーを登録するためのコードが見つかるJSソースファイルをリストします。もう1つのオプションは、ページ上のソースを検索してモーダルコードで見つかったフレーズ、たとえばvar Modalを探すことです。

残念なことに、これらは常にすべての場合に物事を見つけるわけではありません。ネットワーク要求を調べると、ページにロードされているすべてのものの画像を見ることができるようになり、もう少し堅牢になります。

（壊れた）デモ

これは、bootstrap.jsとbootstrap-modal.jsの両方をロードしたときに何が起こるかのデモです（ちょうどあなたの経験を確認するため） ）：

プランカー

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

445
merv

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

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

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

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

77
Rory Hunter

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

data-toggle="modal"

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

20
miCRoSCoPiC_eaRthLinG

私はこの質問に関する他の有益な回答の後、私のMVCアプリで重複したブートストラップの参照をしばらく探しました。

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

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

それで、私は私のbootstrap.min.jsからbundle.configを削除しました、そして、すべてはうまく働きました。

15
John Lucas

bootstrap-sass gemによって提供されたBootstrapを使ったRailsアプリケーションのコンテキストでの同じ症状、そして@ mervの答えは私を正しい軌道に乗せました。

私のapplication.jsファイルには以下がありました。

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

修正は2行のうちの1行を削除することでした。確かに、宝石のreadmeはこのエラーについてあなたに警告します。私の悪い.

13
Giuseppe

私のコードはどういうわけかbootstrap.min.jsを二度含んでいました。私はそれらのうちの1つを取り除きました、そしてすべては今うまく働きます。

8
Ricardo Pieper

jquery uiを含むe.preventDefault();

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

8
LX-3

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

7
gpasse

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

...そしてそれは問題を解決しました。

注：私はまだコメントや投票を追加するだけの十分な評判をまだ持っていません、そして私は私が少し明確化を加えることができると感じました。

6
JDev

私は今日この問題に遭遇しました、そしてそれはたまたまChromeだけにあるのです。それがレンダリングの問題であるかもしれないことを私に認識させたもの。特定のモーダルを独自のレンダリングレイヤに移動することで解決しました。

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

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

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

そしてそれは失踪問題を解決しました。

3
doug

私の場合は、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>
3
Mekey Salaria

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

これが私の修正です：

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

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

を使用して、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>

それから問題は最初のものに＃がないのでただのエラーを解決します。

これがあなたに役立つかどうか見てください。

2
Saurabh Solanki

さらに別の原因/解決策！私は私の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>

そのため、これは重複がコードに入り、モーダルをオープンしてからクローズした方法の別の置換です。私の場合、Bootstrapのドキュメントによると、HTMLのdata-targetとdata-toggleはすでにモーダルを機能させます。したがって、JSコードは冗長であり、削除すると機能します。

1
james

私はasp.NETでプロジェクトに取り組んで同じ問題を抱えていた。 Bootstrap 3.1.0を使用していたので、Bootstrap 2.3.2にダウングレードできました。

1
Ago

私の場合は、CDNをapplication.html.erbの先頭に含め、 'jquery-Rails'というgemもインストールしました。これは、上記のドキュメントと記事のおかげで冗長だと思います。

私は単にapplication.html.erbの先頭からCDN（下記）をコメントアウトし、モーダルは適切に開いたままにします。

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

削除してみましたか

data-dismiss="modal"
0
JeffNhan

誰もがdatatableで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'
0
bravo net

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

0
Pete

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

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

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

変更点

  • buttonタグから "data-toggle =" modal "を削除しました（@miCRoSCoPiC_eaRthLinGのおかげでこの回答はここで役に立ちます）。

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

0
Bhagvat Lande

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

そのため、モデルのポップアップを解除する理由は、以下の1つ以上になります。

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

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

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

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

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

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

私も問題がありました、ボタンがタグの中にあるならば、モーダルは一度現れて、十分にすぐに姿を消します、フォームからボタンを取って問題を解決しました。おかげで私はこのスレッドになった！すべてに+1.

0
satheeshwaran

bootstrapを使用してプロジェクトにbowerを追加した後、bootstrap.min.jsファイルをインポートし、modal.jsファイルの後にインポートしました。 （モーダルを開くボタンはフォーム内にあります）。私はmodal.jsのインポートを削除しただけで、それは私にとってはうまくいきます。

0
pableiros