Изменение размера и перетаскивание проблем с помощью диалогового окна jQuery через iFrame - PullRequest
Новая
       18

Изменение размера и перетаскивание проблем с помощью диалогового окна jQuery через iFrame

1 голос
/ 18 августа 2011

Я использую диалоги jQuery над iframe на моей веб-странице, а изменение размера и перетаскивание не работает должным образом.

Что он делает, он перестает работать, когда ваша мышь выходит за пределы окна, чтодовольно раздражает, потому что это происходит очень быстро.Это происходит путем перетаскивания и изменения размера диалогов.

Вот небольшой скелет, в котором я смог воспроизвести проблему: 

<!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 просто крадет фокус,но я понятия не имею, как это исправить.

Спасибо за просмотр!

Ответы [ 2 ]

2 голосов
/ 07 декабря 2011

Я решил эту проблему с помощью прозрачного наложения, которое появляется только при перетаскивании диалога. Вот некоторый грязный код, который должен дать вам идею: 

<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
  });
});
1 голос
/ 18 августа 2011

установите эти два параметра, чтобы он работал: 

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