Jquery UI可调整大小 - 调整大小放置在iframe上的div [英] Jquery UI resizable - resize a div placed over an iframe
问题描述
如果您查看此jsbin: http://jsbin.com/efosed/5/edit ,然后按Run with JS,将有一个div,可以调整大小与jquery ui。一切都如预期。
div放置在全屏iframe之上。在链接的示例中,此iframe具有: display:none
。
If you check out this jsbin: http://jsbin.com/efosed/5/edit and you press "Run with JS", there will be a div that can be resized with jquery ui. Everything works like expected.
The div is placed over a "full-screen" iframe. In the linked example this iframe has: display: none
.
如果我将其修改为 display:block
,并重新运行脚本reziable插件将有一些奇怪的行为。您可以在这里尝试: http://jsbin.com/efosed/6/edit 。
它不会正确处理鼠标事件。
可能的原因是什么,如何解决?
If I modify it to display: block
, and re-run the script the reziable plugin will have some strange behavior. You can try it here: http://jsbin.com/efosed/6/edit.
It will not handle mouse events correctly.
What can be the reason, and how can I fix it?
推荐答案
修复iframe。一种解决方案是在您的iframe上添加div:
You have to implement your own logic to fix iframe. One solution is to add a div over your iframe:
$(function() {
$('#resizable').resizable({
start: function(event, ui) {
$('<div class="ui-resizable-iframeFix" style="background: #fff;"></div>')
.css({
width:'100%', height: '100%',
position: "absolute", opacity: "0.001", zIndex: 1000
})
.appendTo("body");
},
stop: function(event, ui) {
$('.ui-resizable-iframeFix').remove()
}
});
});
对于现代浏览器支持CSS属性 pointer-events
,有一个更好的解决方案,请参阅代码和jsbin:
For modern browsers which support CSS property pointer-events
, there is a better solution, see code and jsbin:
$(function() {
$('#resizable').resizable({
start: function(event, ui) {
$('iframe').css('pointer-events','none');
},
stop: function(event, ui) {
$('iframe').css('pointer-events','auto');
}
});
});
这篇关于Jquery UI可调整大小 - 调整大小放置在iframe上的div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!