jquery-ui 对话框不居中，关闭按钮奇怪的行为
Posted
技术标签:
【中文标题】jquery-ui 对话框不居中，关闭按钮奇怪的行为【英文标题】：jquery-ui dialog not centering, close button strange behaviour 【发布时间】：2018-10-08 01:45:40 【问题描述】：jquery-ui 对话框的两个问题：
-
它总是在屏幕的左上角打开，我需要它居中
关闭框 (X) 和关闭按钮仅在第一次使用
对话框打开。
在关闭对话框的第一个实例后再次调用 openNewEvent 函数时，对话框打开但无法关闭，因为按钮不起作用。控制台上没有错误。
也许值得一提的是，代码在 Office 365/SharePoint 环境中运行。
在 jquery-ui 对话框中打开特定网页的函数如下所示：
function openNewEvent()
var page = "http:/mypageurl";
var dialog = jQuery('#dialogdiv')
.html('<iframe style="border:0px;" src="' + page + '" ></iframe>')
.dialog(
title: "Page",
autoOpen: false,
dialogClass: 'ui-dialog,ui-widget-header',
modal: false,
resizable: false,
position: my: "center", at: "center", of: "window", collision: "none",
height: 1020,
minHeight: 1020,
width: 1200,
buttons:
"Ok": function ()
jQuery(this).dialog("close");
,
create: function (event, ui)
jQuery(event.target).parent().css('position', 'fixed');
);
dialog.dialog('open');
您可以使用以下 HTML 代码对其进行测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
function openNewEvent()
var page = "http://code.jquery.com";
var dialog = jQuery('#dialogdiv')
.html('<iframe style="border:0px;" src="' + page + '" ></iframe>')
.dialog(
title: "Page",
autoOpen: false,
dialogClass: 'ui-dialog,ui-widget-header',
modal: false,
resizable: false,
position: my: "center", at: "center", of: "window", collision: "none",
height: 550,
minHeight: 550,
width: 350,
buttons:
"Ok": function ()
jQuery(this).dialog("close");
,
create: function (event, ui)
jQuery(event.target).parent().css('position', 'fixed');
);
dialog.dialog('open');
</script>
<div id="dialogdiv"></div>
<button onClick="openNewEvent()">Click me</button>
</body>
</html>
【问题讨论】：
请发布HTML代码进行测试 添加了html代码:) 【参考方案1】：两件事情都正常，检查你使用的 jQuery 版本是 3.3.1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
function openNewEvent()
var page = "http://code.jquery.com";
var dialog = jQuery('#dialogdiv')
.html('<iframe style="border:0px;" src="' + page + '" ></iframe>')
.dialog(
title: "Page",
autoOpen: false,
dialogClass: 'ui-dialog,ui-widget-header',
modal: false,
resizable: false,
height: 550,
minHeight: 550,
width: 350,
buttons:
"Ok": function()
jQuery(this).dialog("close");
,
create: function(event, ui)
jQuery(event.target).parent().css('position', 'fixed');
);
dialog.dialog('open');
</script>
<div id="dialogdiv"></div>
<button onClick="openNewEvent()">Click me</button>
</body>
</html>
【讨论】：
所以只是摆脱职位信息？这是我能发现的唯一区别。以上是关于jquery-ui 对话框不居中，关闭按钮奇怪的行为的主要内容，如果未能解决你的问题，请参考以下文章
使用 jQuery-ui 对话框的 Knockout 组件忽略绑定