Question

我已经尝试了几天来找出做我想要的最好的方法。我想在我的页面上有一个包含iframe的元素，这个元素可以调整大小并由最终用户重新定位。他们可以随时调整大小并重新定位，而后面的其他网站仍然可用

我尝试了一些jquery插件，但似乎都没有做我想要的。

我找到了一个灯箱克隆列表（http://planetozh.com/projects/lightbox-clones/），但没有一个完全符合我的要求。有没有人对可以实现此目的的插件有任何想法？我可能只是没有考虑正确的搜索术语并且已经达到了一个死胡同。

Answer 1

使用jQuery UI Draggable和Resizable的组合来实现“Window in Window”的效果

$(document).ready(function() {
  $('#window')
    .resizable()
    .draggable();
});

#window {
  width: 150px;
  height: 80px;
  border: 1px solid #454;
  border-top: 5px solid blue;
  background-color: white;
  padding: 10px;
}
#window input {
  width: 40px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="window">
  <label>Your name:
    <input type="text" />
  </label>
  <br/>
  <button>Submit</button>
</div>

用户可在网页上调整大小和重新定位窗口

1 个答案: