时间戳

首页 > 解决方案 > 模态未显示在 HTML 文件中

javascript - 模态未显示在 HTML 文件中

问题描述

我知道这不是一个罕见的问题，但我还找不到解决方案。我只想在使用 JavaScript 单击按钮时显示模式。但是当我单击按钮并且模式没有出现时，它总是显示错误。以下是我目前的问题和疑问

错误：

Uncaught ReferenceError: $ is not defined

现在，当我添加这些脚本时，它会影响我的 Web 系统中的 UI 和 css。我的问题是以下脚本中是否有任何特定代码只能在模态中使用？我只是复制并粘贴到我的主要 js 和 css 而不影响 UI 谢谢！

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

HTML 文件：

<table style="width: 100%;" id="example" class="table table-hover table-striped table-bordered">
  <thead>
      <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
      </tr>
     </thead>
          <tbody>
            <tr>
              <td>Airi Satou</td>
              <td>Accountant</td>
              <td>Tokyo</td>
              <td>33</td>
              <td>2008/11/28</td>
              <td><button onclick="myFunction()">
              Basic Modal</button>
              </td>
            </tr>                   
         </tbody>
</table>

<!-- this is my modal -->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">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 class="mb-0">This is sample modal.</p>
        </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>

JavaScript：

<!-- my javascript -->
  <script type="text/javascript">
    function myFunction() {

     $("#exampleModal").modal()
    }
   </script>

标签： javascripthtml

解决方案

您需要在 head 标记处添加这些 css 和 javascript 库

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


function myFunction() {

     $("#exampleModal").modal()
    }
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
<table style="width: 100%;" id="example" class="table table-hover table-striped table-bordered">
  <thead>
      <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
      </tr>
     </thead>
          <tbody>
            <tr>
              <td>Airi Satou</td>
              <td>Accountant</td>
              <td>Tokyo</td>
              <td>33</td>
              <td>2008/11/28</td>
              <td><button onclick="myFunction()">
              Basic Modal</button>
              </td>
            </tr>                   
         </tbody>
</table>

<!-- this is my modal -->

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">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 class="mb-0">This is sample modal.</p>
        </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>

推荐阅读