BootstrapModal不會出現-有解無憂

我已經在我的頁面中添加了一個引導模式，但是在單擊按鈕時它沒有出現，即使我在另一個專案中作業并且它的設定方式完全相同。

我不知道如何解決這個問題，當我點擊按鈕時什么也沒有發生。

這是我的代碼：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<input class="button" type="button" data-toggle="modal" data-target="#employeedropdownscan" value="Click Here" ">

<!-- Modal -->
<div class="modal fade " id="employeedropdownscan " tabindex="-1 " role="dialog " aria-labelledby="exampleModalCenterTitle " aria-hidden="true ">
  <div class="modal-dialog modal-dialog-centered " role="document ">
    <div class="modal-content ">
        <div class="modal-header ">
        <h5 class="modal-title " id="exampleModalLongTitle ">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 ">
          ...
        </div>
        <div class="modal-footer ">
        <button type="button " class="btn btn-secondary " data-dismiss="modal ">Close</button>
        <button type="button " class="btn btn-primary ">Save changes</button>
        </div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

您使用 Bootstrap 4.0.0 中的 CSS 和 Bootstrap 3.7.7 中的 JS。它不應該作業。讓我們使用 3.4.1 :)
在id你的模態的屬性對端有一個額外的空間。讓我們洗掉它。
我們在data-dismiss屬性末尾有相同的額外空間。它阻止關閉按鈕。我們也修一下吧。

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<input class="button" type="button" data-toggle="modal" data-target="#employeedropdownscan" value="Click Here" ">

<!-- Modal -->
<div class="modal fade " id="employeedropdownscan" tabindex="-1 " role="dialog " aria-labelledby="exampleModalCenterTitle " aria-hidden="true ">
  <div class="modal-dialog" role="document">
    <div class="modal-content ">
        <div class="modal-header ">
        <h5 class="modal-title " id="exampleModalLongTitle ">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 ">
          ...
        </div>
        <div class="modal-footer ">
        <button type="button " class="btn btn-secondary " data-dismiss="modal">Close</button>
        <button type="button " class="btn btn-primary ">Save changes</button>
        </div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

首先，使用這些匯入使其作業。

Bootstrap 的 CSS 和 JavaScript 版本應該匹配。

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

其次，不要在屬性末尾放置空格。

除了匯入之外，由于 HTML 屬性中的空格過多，我能夠在您的代碼中發現另外兩個問題。

Bootstrap 找不到目標模態元素
當模態打開時，關閉按鈕不起作用

原因：

id="employeedropdownscan "
data-dismiss="modal "

怎么修：

id="employeedropdownscan"
data-dismiss="modal"

完整代碼/作業片段

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<input class="button" type="button" data-toggle="modal" data-target="#employeedropdownscan" value="Click Here">

<!-- Modal -->
<div class="modal fade" id="employeedropdownscan" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true ">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">
            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">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/341316.html

標籤：javascript html 推特引导引导模式

上一篇：資料庫資訊嵌入discord.js

下一篇：如果在陣列中找到單詞，則Vue.js按下拉串列過濾（僅不完全匹配）