弹出窗口没有在jQuery mobile中完全显示？

Question

我有一个弹出窗口包含一个列表视图，并将其动态添加到弹出窗口中。我的问题是，当我按下Show PopUp按钮时，它首先显示图像然后继续显示带有列表的弹出窗口

我该如何解决这个问题？为什么弹出窗口没有完全显示出来？

请帮帮我..

这是我的代码：

<div data-role="page"  id="MainPage">
      <div data-role="header" data-theme="b">
         Main Page
      </div>
     <div data-role="content"  >
     <a href="#mypop" data-rel="popup"  id="Btn1"  data-role="button" data-inline="true" >Show POPUP    </a>
     </div>

   <div data-role="popup"  id="mypop" data-position-to="window"  data-corners="false"   data-overlay-theme="a" data-dismissible="false"  >

     <div data-role="header" data-theme="b" >

     <a href=""   id="ClosePOPUP"  data-role="button" class="ui-btn-left" data-inline="true"    >Cancel      </a>
         <div style="text-align:center;float:center;padding-top:11px;" ><font  size="6px"             color="white"   >pop</font></div>
      </div>

       <div  id="scrollDiv" class="content"  data-role="content"  style="background-color: white;overflow-y:scroll; ">
                <ul  id="PList"  data-role="listview" style="margin: 0 !important;">

                </ul>
                </div>
             </div>
</div>

java脚本：

 $('#MainPage').on( 'pageshow',function(event){    

      for(var i=0;i<100;i++)
      {
          $('#PList').append( '<li><img src="images/img1.png"  /> '+ 
                           ' element</li> '); 

       }
       $('#PList').listview('refresh');

    }); 


   $(document.body).on('click','#ClosePOPUP', function(){ 

    $('#mypop').popup('close');

 });