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

我在我的网页中通过iframe使用jQuery对话框，并且调整大小和拖动功能不能按预期工作。通过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刚偷的焦点，但我不知道如何解决这个问题。

感谢收看！

来源

2011-08-18 Arcturus

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

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

来源

2011-08-18 13:10:05 XGreen

iframe是没有对话的选项，并用模式，它的工作原理，真实的，但我不希望对话框来是模态.. – Arcturus

好吧，这是一个非常困难的或似乎不可能对我。因为当你有这个iframe的时候，当你离开这个盒子时，你在一个不同的文档上，并且jquery正在跟踪div所在的文档的x和y。也许设置叠加不透明度为零？它仍然莫代尔但不可见。 – XGreen

我认为这可能工作，仍然会更喜欢非模态的方式，但这将不得不做..谢谢！ – Arcturus

我解决了这个由具有只有当你拖动对话框出现透明覆盖。下面是一些乱码，应该给你的想法：

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

来源

2011-12-07 05:01:38

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

回答

相关问题