如何使用最小尺寸（jQuery）进行缩放效果？

Question

我正在尝试在弹出窗口出现时添加比例效果。这个弹出窗口是可拖动的（感谢 jQuery），只有最小宽度和最小高度，但必须不包含固定大小，因为内容可以动态更改（这是一种可以重复使用的基本弹出窗口用于多个弹出内容）。

我想做的是this，但实际上我有this

$('a.close').click(function() {
  $('#box').hide('scale', {
    percent: 0,
    direction: 'both',
    origin: ['middle', 'middle'],
  }, 1000);
});

$('#show').click(function() {
  $('#box').show('scale', {
    percent: 100,
    direction: 'both',
    origin: ['middle', 'middle'],
    easing: 'easeOutBounce',
  }, 1000);
});

#box {
  position: absolute;
  background: #666666;
  min-width: 200px;
  min-height: 200px;
  left: 100px;
  top: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" name="show" id="show" class="show" value="Show">
<div id="box" style="display:none;">
  <a href="#" class="close">Close</a>
</div>

提前致谢。 狮子座

Answer 1

如果您从盒子中删除最小高度和最小宽度，并在其中放置一个带有内容的 div，则盒子的大小将与内容匹配。然后您可以将 min-width 和 min-height 设置为内容而不是框。

Here's a fork of your fiddle with the changes.

/*HTML*/
<input type="button" name="show" id="show" class="show" value="Show">
<div id="box" style="display:none;">
    <a href="#" class="close">Close</a>
    <div>
        THIS IS SOME CONTENT
    </div>
</div>

----------

/*CSS*/
#box {
    position: absolute;
    background: #666666;
    left: 100px;
    top: 100px;
}


#box div {
    padding: 30px;
    min-width: 200px;
    min-height: 200px;
}