1

我在使用JQuery UI顯示單獨頁面的iframe上設置了模式對話框。當頁面內容高度大於對話框高度時,滾動條顯示在Firefox中,儘管位於右側,當我使用Internet Explorer 8或Chrome瀏覽器時,它們不顯示tho。我的代碼去如下:JQuery UI對話框滾動條不顯示在Internet Explorer 8上

庫調用程序代碼:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> 

代碼在一個單獨的.js文件打開對話框:

function showRegDialog(url) { 
    idNro = Math.floor((Math.random() * 1500) + 1); 

    $(function() { 

     var horizontalPadding = 0; 
     var verticalPadding = 0; 

     $('<iframe id="externalSite' + idNro + '" scrolling="no" frameborder="0" padding="0" margin="0" style="overflow:auto" class="externalSite" src="' + url + '" />').dialog({ 
      open: function() { 
       $(this).siblings('.ui-dialog-titlebar').remove(); 
      }, 
      title: false, 
      autoOpen: true, 
      width: 750, 
      height: 700, 
      modal: true, 
      resizable: false, 
      draggable: false, 
      autoResize: false, 
      overlay: { 
       opacity: 0.5, 
       background: "black" 
      } 

     }).width(550).height(700); 

    }); 
} 

揭幕戰頁面有:

<style type="text/css">  
html {overflow : visible} 
</style> 
<body> 
<ul> 
<li><a href="javascript:showRegDialog('view_edit.aspx?c=1');"> Edit<img src="images/btn/edit_pv.png" align="Absbottom" border="0"/></a>     
</li> 
</ul> 
<!--...--> 
</body> 

單獨的內容頁面有:

<style type="text/css">  

.viewEdit 
{ 
margin: 0px 0px 0px 0px; 
padding: 0px 0px 0px 0px 
} 

.viewEditForm 
{ 
margin-left: 0px; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 0px 
} 

.viewEditMainDiv 
{ 
margin-left: 0px; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 0px 
} 

</style>  

<body class="viewEdit" style="overflow-x:hidden"> 
<form id="form1" class="viewEditForm"> 
<div class="viewEditMainDiv"> 
<!--...--> 
</div> 
</form> 
</body> 

如何讓這些滾動條顯示在IE和Chrome上?我已經做了大量的研究,似乎overflow:visibleoverflow:auto會做的伎倆,但這還沒有爲我工作。它可能是一個jquery-ui版本的錯誤,如果是的話我該如何解決它?

非常感謝您的時間和幫助。

回答

1

儘管看上去很傻,我將呈現的iframe的scrolling="no"屬性更改爲scrolling="yes",並解決了它。

function showRegDialog(url) { 

idNro = Math.floor((Math.random() * 1500) + 1); 
$(function() { var horizontalPadding = 0; 
var verticalPadding = 0; 

$('<iframe id="externalSite' + idNro + '" scrolling="yes" frameborder="0" padding="0" margin="0" style="overflow:auto" class="externalSite" src="' + url + '" />').dialog({ 
       open: function() { 
        $(this).siblings('.ui-dialog-titlebar').remove(); 
       }, 
       title: false, 
       autoOpen: true, 
       width: 750, 
       height: 700, 
       modal: true, 
       resizable: false, 
       draggable: false, 
       autoResize: false, 
       overlay: { 
        opacity: 0.5, 
        background: "black" 
       }  
      }).width(550).height(700);  
     }); 
} 

謝謝。