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

Question

我一整天都在寻找这个问题的解决方案，但无济于事。

我正在使用 BS 4.0 并尝试显示一种模式以响应按钮单击，其中按钮是通过 Ajax 调用动态创建的。基本上，按钮显示远程打印机的状态("就绪"或错误代码(，单击时，它们要么显示打印机配置数据，要么在模态内的 iframe 中显示"离线.html"。

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

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>

我使用铬"检查"时的标记：

<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样式也会把事情搞砸：

母版页的"内容"部分位于带有类"page"的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);
}

Answer 1

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

模态上的"class="淡入"导致它 a( 被隐藏和 b( 平滑出现。似乎"in"类现在已经重命名为"show"。

溶液：

.fade.in {
opacity: 1;
}
.modal.in .modal-dialog {
-webkit-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.modal-backdrop .fade .in {
opacity: 0.5 !important;
}

.modal-backdrop.fade {
opacity: 0.5 !important;
}

这是我找到解决方案的地方：