未显示响应按钮单击的模式弹出窗口

Question

我整天都在寻找解决此问题的方法，但无济于事。

我正在使用BS 4.0，并尝试显示模式以响应按钮单击，其中通过Ajax调用动态创建按钮。基本上，这些按钮会显示远程打印机的状态（“就绪”或错误代码），并且在单击时它们会在模式内的iframe中显示打印机配置数据或“ offline.html”。

此项目位于ASP.net，.Net 4.6中，使用母版页。这就是我所拥有的（一些更改已被注释掉，但我将其留在此处以显示所做的更改）：

Site.master文件中的CSS和JS引用，确保使用相同版本的css和js：

<%--    <link rel="stylesheet" href="<%= ResolveUrl("assets/vendor/bootstrap/css/bootstrap.min.css") %>" />--%>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="<%= ResolveUrl("assets/vendor/jquery/css/jquery.dataTables.min.css") %>" />
<link rel="stylesheet" href="<%= ResolveUrl("assets/vendor/jquery/css/jquery-ui.min.css") %>" />

<script src="<%= ResolveUrl("assets/vendor/jquery/jquery.min.js") %>"></script>
<%--    <script src="<%= ResolveUrl("assets/vendor/popper.js/umd/popper.js") %>"></script>--%>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="<%= ResolveUrl("assets/vendor/bootstrap/js/bootstrap.min.js") %>"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<%--    <script src="<%= ResolveUrl("assets/vendor/jquery/jquery.json.min.js") %>"></script>--%>

模式对话框在aspx页面中：

<div class="modal fade" id="printerInfoModal" role="dialog" aria-labelledby="mainModalLabel" aria-hidden="true">
    <div class="modal-dialog fade in">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">
                    <span id="lblModalTitle" class="text-center"></span></h4>
            </div>
            <div class="modal-body" style="width:100%">
                <iframe src="" id="modeliframe" style="zoom:1.0" frameborder="0" height="550"></iframe>
            </div>
            <div class="modal-footer">
                <button id="btnCloseModal" class="btn btn-info" data-dismiss="modal" aria-hidden="true" aria-label="Close">Close</button>
            </div>
        </div>
    </div>
</div>        

创建按钮的Ajax代码（部分代码，创建“成功”按钮）

if (status == "Ready") {
    $('<div/>', { class: 'col-sm-2' }).append($('<label/>', { class: 'control-label', style: 'font-size:.8em;' }).append(document.createTextNode(' Printer ' + printer.PRINTER_NAME + ' (' + printerIP + ')')))
            .append($('<a/>', { id: 'printer' + printer.PRINTER_NAME, class: 'btn btn-success btn-block extLink', type: 'button', style: 'margin-bottom:5px;font-size:.8em;width:100%', href: printerURL, 'data-target': '#printerInfoModal', 'data-toggle': 'modal', text: status.replace(/\"/g, '') }))
            .appendTo($('#printerStatusTable'));
}

在aspx文件中放置按钮的位置：

<div class="row">
    <div class="col-md-12">
        <div class="card" id="pnlPrinterStatus">
            <div class="card-header">
                ...
            </div>
            <div class="card-body">
                <div class="row" id="printerStatusTable">
                </div>
            </div>
        </div>
    </div>
</div>

标记当我使用Chrome浏览器“检查”时：

<div class="row" id="printerStatusTable">
    <div class="col-sm-2">
        <label class="control-label" style="font-size:.8em;"> Printer 01 (1.2.3.4)</label>
        <a id="printer01" class="btn btn-danger btn-block extLink" type="button" style="margin-bottom:5px;font-size:.8em;width:100%;color:#FFF" href="http://1.2.3.4" data-target="#printerInfoModal" data-toggle="modal">P00-No response</a>
    </div>
    <div class="col-sm-2">
        <label class="control-label" style="font-size:.8em;"> Printer 05 (5.6.7.8)</label>
        <a id="printer05" class="btn btn-danger btn-block extLink" type="button" style="margin-bottom:5px;font-size:.8em;width:100%;color:#FFF" href="http://5.6.7.8" data-target="#printerInfoModal" data-toggle="modal">P00-No response</a>
    </div>
</div>

当我使用Bootstrap 3时，这很好用。

另外一条信息，因为我在某处阅读过CSS样式也可能使事情搞砸：

母版页的“内容”部分位于具有“页面”类的div中，该类具有绝对位置，如果将其删除，它将破坏页面布局，并且我不是CSS专家（使用网站模板） >

.page {
  position: absolute;
  top: 0;
  right: 0;
  margin-left:200px;
  -webkit-transition: width 0.3s linear;
  transition: width 0.3s linear;
  width: calc(100% - 200px);
  background-color: #F4F7FA;
  min-height: 100vh;
  padding-bottom: 50px;
}

.page.active {
  width: calc(100% - 70px);
}

我整天都在寻找解决此问题的方法，但无济于事。我正在使用BS 4.0，并尝试显示模式以响应按钮单击，其中按钮是通过...

Answer 1

[发现这是BS 4的问题。我找到解决方案的帖子的节选：