jQuery 对话框弹出窗口在弹出窗口右上角的关闭框中没有“x”答案

【问题标题】：jQuery dialog popup does not have a "x" in the close box in top right of popupjQuery 对话框弹出窗口在弹出窗口右上角的关闭框中没有“x”
【发布时间】：2020-03-29 05:42:36
【问题描述】：

我有一个 jQuery 弹出窗口，但“x”没有出现在弹出窗口右上角的关闭框中。

我正在使用这个例子：https://jqueryui.com/dialog/

我已包含链接和脚本（各两个）。

我的html是：

  <div class="form-popup form-container autoScroll" id="myForm">
        <table class="table table-hover table-bordered" id="riskTable">
            <thead>
                <tr>
                  <th>rkId</th>
                  <th>Risk Name</th>
                  <th></th>
                </tr>
            </thead>
            <tbody id="riskTablebody">
            </tbody>
        </table>
    </div>

我的 jQuery 是：

$(function() {
    $('#updateRisk').click(function() {
        $("#myForm").dialog({
            title: "Select Risks",
            width: 600, 
            modal: true, 
            resizable: true,
        });   
    });    
});

我希望它尽可能地方便用户使用，因此红色的“X”将是一个额外的奖励！

我的cdn库列表是：

<!-- Validate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>

<!-- Bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>


<!-- DataTables -->
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.20/dataRender/datetime.js"></script>

<!-- Confirm -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>

<!-- Bootstrap Date Picker-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

<!-- Google Maps - not implemented due to cost -->
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>  -->

<!-- Le styles -->
<!-- jQuery -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.structure.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css">

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />

<!-- DataTables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">

<!-- Confirm -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">

【问题讨论】：

好像你缺少包括 css 文件。请将css添加到您的html
这里可以找到捆绑在一起的 JS 和 CSS jqueryui.com/download/all

标签： javascript jquery html dialog

【解决方案1】：

只需添加必要的库，它应该可以工作。下面是一个工作示例。我还添加了一些 css 来在模型打开之前隐藏内容。

#dialog{
  display:none;
}

工作示例：

https://jsfiddle.net/mrAhmedkhan/04goxq8h/11/

【讨论】：

谢谢汗先生；但是，请问有哪些必要的库？我在上面更新了我所包含的库的完整列表。请问我错过了什么cdn？我已经有了隐藏。

【解决方案2】：

好的，jquery-ui.min.js 从 1.10 开始就被破坏了。所以要么：

安装较早的版本；或
将库放在引导库之后（会对引导工具提示产生不利影响）；或

用下面的代码解决冲突：

$('#updateRisk').click(function() {
    if (typeof $.fn.bootstrapBtn =='undefined') {
        $.fn.bootstrapBtn = $.fn.button.noConflict();
    };

    $("#myForm").dialog({
        title: "Select Risks",
        width: 600, 
        modal: true, 
        resizable: true,
    });
    showRiskTable();
});

【讨论】：