Question

如果你看看这个jsbin：http://jsbin.com/efosed/5/edit然后按“Run with JS”，就会有一个可以用jquery ui调整大小的div。一切都像预期的那样。 div被放置在“全屏”iframe上。在链接的示例中，此iframe包含：display: none。

如果我将其修改为display: block，并重新运行该脚本，则reziable插件会有一些奇怪的行为。你可以在这里试试：http://jsbin.com/efosed/6/edit。它不会正确处理鼠标事件。可能是什么原因，我该如何解决？

Answer 1

你必须实现自己的逻辑来修复iframe。一种解决方案是在iframe上添加div：

DEMO

$(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的{{3}}，有一个更好的解决方案，请参阅代码和jsbin：

modern browsers

$(function() {
  $('#resizable').resizable({
      start: function(event, ui) {
        $('iframe').css('pointer-events','none');
         },
    stop: function(event, ui) {
        $('iframe').css('pointer-events','auto');
      }
  });
});

Answer 2

你可以做得更简单：

的Javascript

$(function() {
  $('#resizable').resizable({
      start: function(event, ui) {
        $(this).addClass('freeze')
      },
    stop: function(event, ui) {
        $(this).removeClass('freeze')
      }
  });
});

CSS

#resizable.freeze iframe { pointer-events: none; }

Answer 3

仅CSS方法

.ui-resizable-resizing iframe { pointer-events：none; }

每当您调整某些内容时，都会添加ui-resizable-resizing类。

Jquery UI可调整大小 - 调整放在iframe上的div的大小

3 个答案: