web-dev-qa-db-ja.com

Bootstrap 4 .modal（ 'hide'）が機能しない

IFrameを表示するために、非常にシンプルで少し調整されたモーダルを作成しています。ブートストラップによって提供されるjavascript関数とモーダル呼び出し関数によってモデルを開きます。モーダルには、モーダルを閉じるためのアイコンを配置しました。この閉じるアイコンをクリックすると、モーダルは非表示になりません。ブートストラップによって提供される.modal('show')および.modal('hide')関数でjavascript onclickを使用します。モーダルは非表示になりませんが、コンソールログが起動します。

似たような問題に関する多くの質問があることは知っていますが、これらの質問には探していた答えが含まれていませんでした。 htmlのcssが正しくないことは知っていますが、いくつかの高速プロトタイピングを行っていたので、ご容赦ください。

コード

モーダルのリンクを開く

<a href="#" onClick="openFeedback('getBootstrap')">Klik hier om de website te bekijken</a>

モーダルhtml

<!-- Modal -->
<div class="modal fade" id="iframe_feedback" style="padding-top: 20px;">

  <i class="ion-close-round close-modal" style="position: fixed; right: 40px; font-size: 32px; color: white; top: 40px; cursor: pointer;" onClick="closeModal()"></i>

  <div class="body-modal" style="max-width: 90%; margin: 0 auto; overflow: scroll;">

    <div id="clip" style="overflow:scroll;">
        <iframe src="/dashboard" style=" width:2600px; height: 1600px;"></iframe>
    </div>

  </div>  

</div>

JS

function openFeedback(link) {
    $('#iframe_feedback').modal('show');
    console.log(link);
};

function closeModal() {

    $("#iframe_feedback").modal('hide');
    console.log('Close fired');

};

私の主な問題は、私のモーダルが表示され、console.logは表示と非表示の両方に使用できますが、閉じるボタンをクリックしてもモーダルは非表示になりません。

javascriptjquerytwitter-bootstrapbootstrap-4
11
Gijsberts

TLDR;

.modal('hide')またはmodal-dialogが機能するには、モーダル内にneed data-dismiss="modal"divが必要なようです。

-

body-modalクラスをmodal-dialogに変更することで問題を解決しました。 （、スニペットで見やすくするために閉じるアイコンを赤に変更しました）

function openFeedback(link) {
    $('#iframe_feedback').modal('show');
    console.log(link);
};

function closeModal() {

    $("#iframe_feedback").modal('hide');
    console.log('Close fired');

};
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#" onClick="openFeedback('getBootstrap')">Klik hier om de website te bekijken</a>

<div class="modal fade" id="iframe_feedback" style="padding-top: 20px;">
  <i class="ion-close-round close-modal" style="position: fixed; right: 40px; font-size: 32px; color: red; top: 40px; cursor: pointer; z-index: 1700;" onClick="closeModal()">close</i>
  <div class="modal-dialog" style="max-width: 90%; margin: 0 auto; overflow: scroll;">
    <div id="clip" style="overflow:scroll;">
      <iframe src="/dashboard" style=" width:2600px; height: 1600px;"></iframe>
    </div>
  </div>
</div>

しかし今では、モーダルは少し面倒です（視覚的に）。

modal docs を確認することをお勧めします。 Bootstrap 4に含まれる機能を使用すると、おそらく余分な（インライン）CSSおよびJSのほとんどを除去し、この方法でほとんどすべてのブラウザーですべてが正常に機能することを確認します。

4
Klooven

fadeクラスを削除すると、正常に機能します。

fadeクラスを使用する場合は、modal-dialog divが必要だと思います。また、jsウェイまたはdata-toggle/data-dismissのいずれか1つのタイプのクローズ/オープンモーダルのみを使用します。

6
Joel García

モーダルを閉じるにはdata-dismiss = "modal"を使用できます

<i class="ion-close-round close-modal" style="position: fixed; right: 40px; font-size: 32px; color: white; top: 40px; cursor: pointer;" data-dismiss="modal" ></i>

0
Manpreet