Link 上的数据切换未打开模式

Question

过去几天，我一直在为工作中的一个项目而苦苦挣扎于 Modals。触发器是一个 link（带有一个字形让用户知道它是一个 table），我正在尝试使用 link 上的数据切换来打开一个包含 [=30] 的模态=].我不明白为什么它不起作用。

触发器：

    <a data-toggle="modal" href="#tableA">
        <span id="tableA_icon" class="glyph-wrap">
            <span class="glyphicon glyphicon-th-list"></span>
        </span>Table A
    </a>

模态：

    <div class="modal fade" id="tableA" tabindex="-1" role="dialog" link:aria-labelledby="tableA" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                   <h3 class="modal-title">Table A</h3>
                </div>
                <div class="modal-body">
                Table code goes here (the table does display properly when using another method)


         </div>
               <div class="modal-footer">
                   <button type="button" class="btn btn-primary">Print</button>
                   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
               </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

（是的，我的主管希望模态成为 printable（我知道这将是另一个长期的颈部疼痛），但现在我只是专注于尝试获得该死的模态打开。我想我在页脚按钮上遗漏了 CSS 但这不应该阻止模式打开，对吧？）

CSS:

    .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
      position: relative;
      background-color: #333;
      margin: auto;
      padding: 0;
      border: 1px solid #EEE;
      width: 80%;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    }

    /*Modal Header*/
    .modal-header {
      padding: 2px 16px;
      background-color: #EEE;
      color: white;
    }

    /* The Close Button */
    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

    /* Modal Body */
    .Modal-body {padding: 2px 16px;}

    /* Modal Footer */
    .Modal-footer {
      padding: 2px 16px;
      background-color: #EEE;
      color: white;
    }

    /*The Footer Print Button*/
    .print-btn{
        color: #aaa;
        /*float: right;*/
        display: inline-block;
        font-size: 28px;
        font-weight: bold;
    }

    .print-btn:hover,
    .print-btn:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

    /* The Footer Close Button */
    .close-btn {
      color: #aaa;
      /*float: right;*/
      display: inline;
      font-size: 28px;
      font-weight: bold;
    }

    .close-btn:hover,
    .close-btn:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

我做错了什么？

Answer 1

在不查看您的 JS 代码的情况下，我真的没什么可做的。但是如果你只是想让你的模式显示，你应该给你的 span 一个 id 属性或其他东西来识别它。我将您的文本 "Table A" 移到了 span 标签内而不是标签外，并赋予了它一个 id 属性。然后我添加 JavaScript 以在单击文本时打开模式。这只是让您的模态仅显示的一种方法。

JSfiddle：https://jsfiddle.net/5gx62bjw/2/

另一种方法是，您需要包含正确的 script 标签才能使您的模态框正常运行：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

https://jsfiddle.net/5gx62bjw/3/

希望这能帮助你走上正轨

Answer 2

您的错误似乎是您没有在代码中包含 Bootstrap。当您包含它时，它似乎工作正常：

https://jsfiddle.net/9ugo7cvw/1/

要包含它，请根据 Bootstrap 文档将其添加到您的 HTML:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

我认为您犯的错误是假设 data-toggle 作为属性实际上具有功能。据我所知，情况并非如此，因为 data-toggle 不是 HTML5 的一部分，而是由 Bootstrap 添加的内容。如果没有安装 Bootstrap，data-toggle="modal" 只是一个键值对，其中 data-toggle 是键，modal 是值。

如果您不太熟悉 JSFiddle，Bootstrap 及其依赖项已导入到页面左侧的 Resources 选项卡中。

Answer 3

将此用于标记，并在页眉中包含所有 css，在页脚中包含 js 它有效..！

<a href="#yourmodal" data-target="#yourmodal" data-toggle="modal"></a>

Link 上的数据切换未打开模式

Data Toggle on Link not Opening Modal

html

javascript

css

modal-dialog