响应按钮单击时未显示模态弹出窗口

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);
}

Answer 1

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

模态框上的“class="fade in" 导致它 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;
}

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