[英]Jquery UI resizable - resize a div placed over an iframe
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. 如果您签出以下jsbin: http ://jsbin.com/efosed/5/edit,然后按“ Run with JS”,那么将有一个div,可以使用jQuery ui调整其大小。 Everything works like expected.
一切正常。 The div is placed over a "full-screen" iframe.
div放置在“全屏” iframe上。 In the linked example this iframe has:
display: none
. 在链接的示例中,此iframe具有:
display: none
。
If I modify it to display: block
, and re-run the script the reziable plugin will have some strange behavior. 如果我将其修改为
display: block
,然后重新运行脚本,则reziable插件会有一些奇怪的行为。 You can try it here: http://jsbin.com/efosed/6/edit . 您可以在这里尝试: http : //jsbin.com/efosed/6/edit 。 It will not handle mouse events correctly.
它不能正确处理鼠标事件。 What can be the reason, and how can I fix it?
可能是什么原因,我该如何解决?
You have to implement your own logic to fix iframe. 您必须实施自己的逻辑来修复iframe。 One solution is to add a div over your iframe:
一种解决方案是在iframe上添加一个div:
$(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()
}
});
});
For modern browsers which support CSS property pointer-events
, there is a better solution, see code and jsbin: 对于支持CSS属性
pointer-events
现代浏览器 ,有更好的解决方案,请参见代码和jsbin:
$(function() {
$('#resizable').resizable({
start: function(event, ui) {
$('iframe').css('pointer-events','none');
},
stop: function(event, ui) {
$('iframe').css('pointer-events','auto');
}
});
});
You can do it even simpler: 您可以做得更简单:
Javascript Java脚本
$(function() {
$('#resizable').resizable({
start: function(event, ui) {
$(this).addClass('freeze')
},
stop: function(event, ui) {
$(this).removeClass('freeze')
}
});
});
CSS 的CSS
#resizable.freeze iframe { pointer-events: none; }
CSS only method 仅CSS方法
.ui-resizable-resizing iframe { pointer-events: none; .ui-resizable-resizing iframe {指针事件:无; }
}
The ui-resizable-resizing
class is added whenever you are resizing something. 每次调整大小时,都会添加
ui-resizable-resizing
类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.