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是我找到解决方案的地方：

响应按钮单击，模态弹出窗口不显示

1 个答案: