jQuery 对话框弹出窗口右上角的关闭框中没有 "x"
jQuery dialog popup does not have a "x" in the close box in top right of popup
我有一个 jQuery 弹出窗口,"x" 没有出现在弹出窗口右上角的关闭框中。
我正在使用这个例子:https://jqueryui.com/dialog/
我已经包含了 link 和脚本(每个两个)。
我的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 以在模型打开之前隐藏内容。
#dialog{
display:none;
}
工作示例:
好的,jquery-ui.min.js 自 1.10 以来已被破坏。所以要么:
- 安装早期版本;或
- 将库放在 bootstrap 库之后(会对 bootstrap 工具提示产生不利影响);或
用下面的代码解决冲突:
$('#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();
});
我有一个 jQuery 弹出窗口,"x" 没有出现在弹出窗口右上角的关闭框中。
我正在使用这个例子:https://jqueryui.com/dialog/
我已经包含了 link 和脚本(每个两个)。
我的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 以在模型打开之前隐藏内容。
#dialog{
display:none;
}
工作示例:
好的,jquery-ui.min.js 自 1.10 以来已被破坏。所以要么:
- 安装早期版本;或
- 将库放在 bootstrap 库之后(会对 bootstrap 工具提示产生不利影响);或
用下面的代码解决冲突:
$('#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(); });