gpt4 book ai didi

jquery - 通过 iFrame 调整 jQuery 对话框的大小和拖动问题

转载 作者:行者123 更新时间:2023-12-01 08:21:30 24 4
gpt4 key购买 nike

我在网页中的 iframe 上使用 jQuery 对话框,但调整大小和拖动无法按预期工作。

它的作用是,当鼠标移出窗口时它会停止工作,这很烦人,因为它发生得非常快。这是通过拖动对话框和调整对话框大小来实现的。

这是一个小框架,我能够在其中重现问题:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.15.css" />
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.15.min.js" type="text/javascript"></script>
<script>
$(function() {
$("#awesomewindow").dialog();
});
</script>
</head>
<body style="background-color: red; margin: 0px; padding: 0px;">
<div id="awesomewindow">
Window content here!
</div>
<div style="position: absolute; width: 100%; height: 100%; overflow: hidden">
<iframe src="Blue.html" frameborder="0" scrolling="no" height="100%" width="100%" />
</div>
</body>
</html>

我认为 iframe 只是抢走了焦点,但我不知道如何解决这个问题。

感谢您的观看!

最佳答案

我通过使用仅在拖动对话框时才出现的透明覆盖层解决了这个问题。下面是一些凌乱的代码,应该可以让您有所了解:

<div id="pod-overlay"></div>

JS:

$(function() {
var showOverlay = function(event, ui) {
$("#pod-overlay").attr("style", "z-index: 501; width: " + $(window).width() +
"px; height: " + $(window).height() + "px; opacity:0.0;" +
"position: absolute; left: 0; top: 0;);")
};
var hideOverlay = function(event, ui) {
$("#pod-overlay").attr("style", "");
};
$("#awesomewindow").dialog({
dragStart: showOverlay,
dragStop: hideOverlay,
resizeStart: showOverlay,
resizeStop: hideOverlay
});
});

关于jquery - 通过 iFrame 调整 jQuery 对话框的大小和拖动问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7107004/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com