web-dev-qa-db-ja.com

Bootstrapモーダル非表示が機能していません

ブートストラップモーダルの非表示が機能していません。 Alertが他に来ます。しかし、私のモーダルは隠されていませんbootplyを追加しました。私の問題は同じものです。

<button class="button primary" id="buy" data-toggle="modal" data-target=".bs-example-modal-sm" style= "text-decoration:none;" type="button">Review and confirm</button>

<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
  <div class="modal-bootstrap-dialog modal-sm">
    <div class="modal-bootstrap-content">
      <div class="modal-bootstrap-body">
        -- content ----
      </div>
    </div>
  </div>
  <div class="modal-bootstrap-footer">
     <button type="submit" class="button primary" data-dismiss="modal">Close</button>
     <button type="submit" class="button primary">Save changes</button>
  </div>
</div>



<script type="text/javascript">
$("#buy").click(function () {
   var a = 4;
   if (a == 5) {
     alert("if");
     $('#myModal').modal('show');
   }
   else {
    alert("else");
    $('#myModal').modal('hide');
   }

});
</script>

ブートプライ

javascriptjquerytwitter-bootstraptwitter-bootstrap-3
22
Sam

両方のモーダルトグルメソッドを使用しています：Javascript経由とデータ属性経由。したがって、クリックはデータ属性セットとしてモーダルショーを開始し、Javascriptはこのトリガーに影響しません。

データ属性を削除して、Javascriptメソッドを使用するだけです。

<button class="button primary" id="buy" style="text-decoration:none;" type="button">Review and confirm</button>

<div class="modal-bootstrap fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
    <!-- modal contents -->
</div>

<script type="text/javascript">
$("#buy").click(function () {
    var a = 4;
    if (a == 5) {
        alert("if");
        $('#myModal').modal('show');
    } else {
        alert("else");
        $('#myModal').modal('hide');
    }
});
</script>
28
albertedevigo

私は同じ問題を抱えて、多くのことを試みましたが、私のために働いた唯一の解決策は、モーダルの個々の部分を削除することを提案した@Tang Chanrithですが、戻るとスクロールバーを配置するために少し改善されました受け入れられた答えが彼らのために働かなかった場合にだけ、私の答えを置きます。私の英語でごめんなさい。お役に立てば幸いです。

@タン・チャンリス

この機能を試してください

function hideModal() {
  $("#myModal").removeClass("in");
  $(".modal-backdrop").remove();
  $("#myModal").hide();
}

改善された溶解

生成したbodyとcssからクラスを削除するだけです

function hideModal() {
  $("#myModal").removeClass("in");
  $(".modal-backdrop").remove();
  $('body').removeClass('modal-open');
  $('body').css('padding-right', '');
  $("#myModal").hide();
}
13
Vaios P.

この機能を試してください

function hideModal(){
    $("#myModal").removeClass("in");
    $(".modal-backdrop").remove();
    $("#myModal").hide();
}
6
Tang Chanrith

コードを確認しました。ここで、a == 5を比較しますが、aは常に4です。この比較を行う理由を確認する必要があります。また、javascriptからモーダルを開きたい場合は、データターゲットを削除する必要があります：

<button class="button primary" id="buy" data-toggle="modal" style="text-decoration:none;" type="button">Review and confirm</button>

モーダルを直接開くデータターゲット。これが機能しているか確認してください。

1
Kshitiz

次のようにreturn falseを追加してください：

$("#buy").click(function () { 
  var a = 4;
  if (a == 5) {
    alert("if");
    $('#myModal').modal('show');
  }
  else {
    alert("else");
    $('#myModal').modal('hide');
  }
  return false;
});
1
iMichaeln

これを試してください$('.modal.in').modal('hide')

経由 https://github.com/twbs/bootstrap/issues/489

1
Feuda

私はこの問題を解決しています。

$('#landingpage, body').on('click',function(){
    $( ".action-close" ).trigger( "click" );});
1
Takechi Ponchai

同じ問題がありました。投稿で提案されているJavaScriptの方法を試しましたが、残念ながら半分の時間しか機能しませんでした。モーダルを数回トリガーすると、バグが発生します。その結果、CSSを使用して回避策を作成しました。

/* Hide the back drop*/
.modal-backdrop.show {
    display: none;
}
/* Simulate the backdrop using background color */
.modal-open .modal {
    background-color: rgba(47, 117, 19, 0.3);
}
0
Brenden Stefano

私も同じ問題を抱えており、正しい解決策が見つかりません。

後で、モーダルが適切に動作するときにモーダルが閉じられたときに何が起こっているかを観察しました。

3つの主なプロパティは、

  • modal-openクラスは<body>タグから削除されます。
  • <body>タグでCSSを変更します。
  • <div>のmodal-backdropクラスが削除されます。

したがって、これらのことを手動で行うと、うまくいかないときに達成できます。

Jqueryでは、コードは次のようになります。

      $('body').removeClass('modal-open');        
      $('body').css('padding-right', '');
      $(".modal-backdrop").remove();
      $('#myModal').hide();

したがって、これを試して解決策を見つけてください。

0
Gowtham Ag

私が遭遇したように、表示スタイルを削除する必要がある場合があります。

style="display: block;"
0
Mahdi Alkhatib

私は同じ問題を抱えていました。私の間違いは、モーダルウィンドウを数回開こうとしていたことです。開く前に、モーダルウィンドウがまだ開いていないことをテストする必要があります。

    if (!($("#MyModal").data('bs.modal') || {})._isShown){ 
        $("#MyModal").modal('show');
    }
0
Mathieu

Javaスクリプトコードでは、1行のコードを追加する必要があります

$("#savechanges").on("click", function (e) {
        $("#userModal").modal("hide");
        e.stopPropagation(); //This line would take care of it
    });
0
Prathap Kudupu

linkをクリックしてモーダルポップアップを開いていましたリンクから「data-toggle」属性と「href」を削除し、javascriptを使用してそれを開き、javascriptを使用して適切に閉じていました。

以下の数行のコードから、簡単に理解できます

_<a href="#CustomerAdvancedModal" data-toggle="modal" class="classShowAdvancedSearch">Advanced Search</a>_

上記のリンクをリンクに変更しました

_ <a href="#" class="ebiz-Advanced-Search classShowAdvancedSearch">Advanced Search</a>
_

その後、javascriptを使用して閉じようとすると、成功します

$("#CustomerAdvancedModal").modal('hide');

0
Naveed Alam