如何用最小尺寸（jQuery）做一个比例效果？

Question

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

我想做的是this but actually I have 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

如果您从盒子中删除 min-height 和 min-width，并在其中放置一个 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;
}

如何用最小尺寸（jQuery）做一个比例效果？

How to do a scale effect with min size (jQuery)?

javascript

html

jquery

css

effects