web-dev-qa-db-ja.com

Bootstrapモーダルを閉じない

ここには、モーダルを閉じるために使用される2つのボタンがあります。 1つは閉じるアイコンで、もう1つはキャンセルボタンです。どちらもdata-dismissを使用してモーダルを閉じます。ただし、どちらも機能していません。私は別のモーダルに同じコードを使用していますが、そこで正常に機能しています。推測は？

<div id="timeSelectModal{{entry.position - 1}}" style="display: none" class="modal">
    <div class="modal-dialog">
        <div id="timeSelectModalContent" class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <label>
                <input id="checkbox8pm{{entry.position - 1}}" type="checkbox" value="first_checkbox">
                <label class="checkbox-label">Thursday, 08:00 pm.</label>
            </label>
            <br>
            <label>
                <input id="checkbox9pm{{entry.position - 1}}" type="checkbox" value="second_checkbox">
                <label class="checkbox-label">Thursday, 09:30 pm.</label>
            </label>
            <div id="time-modal-footer" class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success" id="timeSaveButton{{entry.position - 1}}" v-on:click="setTime(entry.position - 1)">Save</button>
            </div>
        </div>
    </div>
</div>
javascripthtmlmodal-dialogbootstrap-modal
8
NoorUllah

非常に古いトピックですが、この問題を検索している人には最初に表示されます。おそらく、モーダルdivが起動元の本体divの外側にあることを確認できなかったのと同じ単純な間違いを犯したためです。マテリアルキットを例として使用するには、ターゲットの「#myModal」divがメインコンテナーの終了divタグの外側にあることを再確認する必要があります。

<div class="main main-raised">
    <div class="container">
    <!--                 modals -->
        <div class="row" id="modals">
            <div class="col-md-6">
                <button class="btn btn-primary btn-raised btn-round" data-toggle="modal" data-target="#myModal">
                    Classic modal
                </button>
            </div>

        </div>
    <!--                 end modals              -->
    </div>
</div>

<!-- Classic Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    <i class="material-icons">clear</i>
                </button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>Hey hey</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-simple">Nice Button</button>
                <button type="button" class="btn btn-danger btn-simple" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!--  End Modal -->
15
Dave Dold

まず、bootstrap.jsファイルがHTMLに正しく含まれていることを確認します。

あなたはこのコードを試してモーダルを閉じるためのボタンタグを置き換えることができます-

<a href="#" class="close" data-dismiss="modal" aria-label="close">&times;</a>

それでも機能しない場合は、お知らせください。

JQueryの閉じるボタンにオンクリックイベントを追加できます。このような-

$("#yourModal").modal("hide");
4
Yashwardhan Pauranik

常にモーダルのHTMLコードをドキュメントの最上位に配置して、他のコンポーネントがモーダルの外観や機能に影響を与えないようにしてください。

3
nazmulhaqued

このコードのすぐ先、コード内のmistackを確認してください!!!

<html lang="en">
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<h2>click Here</h2>
<div class="container">
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

</body>
</html>
2
Mr. HK

スクリプトファイルが競合しているため、モーダルは閉じられませんでした。したがって、モデルを閉じる際の問題を確認するために、最小限必要なスクリプトファイルを使用しました。モデルが適切に閉じられるスクリプトを追加した方法

"scripts": [
          "src/assets/js/lib/jquery/jquery.min.js",
          "src/assets/js/lib/bootstrap/js/popper.min.js",
          "src/assets/js/lib/bootstrap/js/bootstrap.min.js"
        ]

そして確かに私はスタイルにbootstrap.min.cssを追加しました。

0
Gaurav Singh