Question

我在网页上的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只是窃取了焦点，但我不知道如何解决这个问题。

感谢收看！

Answer 1

我通过一个只在你拖动对话框时才出现的透明叠加层解决了这个问题。这里有一些杂乱的代码可以给你这个想法：

<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
  });
});

Answer 2

设置这两个参数以使其工作：

$(function () {
        $("#awesomewindow").dialog({
            iframe: true,
            modal : true
        });
    });

使用iFrame上的jQuery对话框调整大小并拖动问题

2 个答案: