jquery - 更改fancybox设计-添加另一个div而不摇晃窗口

我在Fancybox窗口上有JW播放器。一切正常，现在我只有一个设计问题：

显示播放器窗口时（触发时），它从下向上移动到窗口“从下到上”。这是因为我在播放器下添加了另一个div。我怎样才能解决这个问题？
这是一个演示示例：http://teodore.ge/test/demo/

我已经这样写了：

<script>

      $(".fancybox").fancybox({
        fitToView: false, // to show videos in their own size
        content: '<div></div>', // create temp content
        scrolling: 'no', // don't show scrolling bars in fancybox
        afterLoad: function () {

          // get dimensions from data attributes
          var $width = $(this.element).data('width');
          var $height = $(this.element).data('height');


          var link=$(this.element).context.attributes.yutubelink.nodeValue;

          this.content = ' <embed type="application/x-shockwave-flash"  src="player.swf" width="640" height="383"    style="undefined"  allowfullscreen="true" allowscriptaccess="always" wmode="opaque" flashvars="file='+link+'&amp;skin=nacht.zip&amp;autostart=true">';
        },
        afterShow: function(){
          var toolbar = "<div id='tools'>" + $("#appendContent div").eq(this.index).html() + "</div>";
           $(".fancybox-outer").append(toolbar);
          }
      });

</script>


<div id="appendContent" style="display: none;  width: auto; height: auto;">
    <div > 1111   That div  is the problem <br><br><br>  1111111 <br> <br> </div>
    <div> 2222:  That div  is the problem  <br><br><br> 2222222 <br> <br> </div>
</div>



    <a class="fancybox"  yutubeLink="http://www.youtube.com/watch?v=p3iYnHx8P0s" >
    <img src=" 1.jpg"  width="360" height="240"></a><br>

    <a class="fancybox"  yutubeLink="http://www.youtube.com/watch?v=USgLNBsnRGo">
    <img src=" 2.jpg" width="360" height="240"></a> <br>

最佳答案

我移动的功能是在播放器旁边添加一个新的div。我将功能从afterShow（）移至afterLoad（）函数。加载后添加div会导致该问题（更改div的位置）。因为播放器必须位于屏幕的中央，并且当我添加新的div时，该位置正在改变。

关于jquery - 更改fancybox设计-添加另一个div而不摇晃窗口，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15890206/