2013-04-04 188 views
1

我有一个CSS问题,我相信,出现在页面的中间,当我使用jQuery UI的对话框,在IE 10和Firefox 19.0.2一个白色矩形的中间白盒。希望有人能指出原因。 下面是我使用的页面代码和jQuery,它是基本代码。jQueryUI的对话框显示

编辑:我发现当模式时才会发生:真正的对话对象上设置,由于覆盖。

编辑:我解决了这个问题。将在8小时内更新答案。 UI CSS的1.10.2版解决了这个问题。 猜猜我会升级。

的jsfiddle测试这个,如果有人想看到http://jsfiddle.net/9dpsA/
要解决该问题,请更改UI CSS的外部资源,以1.10.2版本中的1.10.1代替。

<!DOCTYPE html> 

    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
    <link href="../css/jquerycss/jquery-ui-1.10.1.custom.css" rel="stylesheet" /> 
    <script src="../JavaScript/jquery-1.9.1.min.js"></script> 
    <script src="../JavaScript/jquery-ui-1.10.1.custom.min.js"></script> 
    <script src="../JavaScript/jquery.blockUI.js"></script> 
    <title>Site</title> 

    <script> 

     $(document).ready(function() { 
      $('#dialog-confirm').hide(); 

      $("#btnArchive").click(function() { 
       $('#dialog-confirm').dialog({ 
        resizable: false, 
        height: "auto", 
        modal: true, 
        buttons: { 
         "Archive": function() { 
          $(this).dialog("close"); 
         }, 
         Cancel: function() { 
          $(this).dialog("close"); 
         } 
        } 
       }); 
      }); 



     }); 

     </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 

    <div id="page" style="text-align:center;"> 

     <div id="header"> 
      <h2>Site</h2> 
      <asp:Button ID="btnMnu" runat="server" Text="Manage Tasks" PostBackUrl="someurl" /> 
      <input id="btnArchive" type="button" value="Archive Selected" /> 
      <asp:Button ID="btnDelete" runat="server" Text="Delete Selected" /> 
     </div> 



     <div id="dialog-confirm" title="Archive the Selected Tasks?"> 
      <p> 
       <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span> 
       <span>Archiving will result in the deletion of the task. Are you sure you want to archive the task(s)?</span> 
      </p> 
     </div> 

     <div id="footer"> 

     </div> 
    </div> 
    </form> 
</body> 
</html> 
+0

活生生的例子将是很好。至少有一些截图。 – 2013-04-04 15:50:39

+0

是的我在工作,不能上传到photobucket,我没有代表添加图像。 – Shaoden 2013-04-04 15:54:17

+0

加入了图像,http://i48.tinypic.com/pp387.png的UI CSS修复的1.10.2这个问题 – Shaoden 2013-04-04 15:59:09

回答

1

版本1.10.2 UI CSS修复这个问题。猜猜我会升级。

要解决该问题,请更改UI CSS的外部资源,以1.10.2版本中的1.10.1代替。

+0

我被困在jquery-ui 1.8.6的那一刻。你碰巧知道在1.10.1和1.10.2之间发生了什么变化?我可能能够将相应的更改应用于1.8.6。切换到1.10将需要运行完整的回归测试套件,这对于一个浏览器的这个小问题来说有点多。 – 2014-02-19 00:57:44

+0

我不知道,但可能通过这看起来会有所帮助。 https://jqueryui.com/changelog/1.10.2/ – Shaoden 2014-03-27 14:51:05

+0

谢谢,但没有帮助。实际上,我尝试将1.10.1和1.10.2版本的CSS进行比较,并将这些delta版本中的一些应用于1.8.6 CSS,但没有任何帮助。 – 2014-03-27 15:33:37

1

与此一更换你的CSS:

<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 

查阅DEMO这里

http://jsfiddle.net/9dpsA/1/

+0

是的,这就是我所做的。谢谢回复。 – Shaoden 2013-04-04 17:58:00