Диалоговое окно JQueryui, показывающее белый квадрат в середине страницы

У меня проблема с CSS Я верю, что белый квадрат появляется в середине страницы, когда я использую диалоговое окно jquery UI в IE 10 и FireFox 19.0.2. Хотел, чтобы кто-то мог указать, почему. Ниже приведен код страницы и jquery, которые я использую, это базовый код.Диалоговое окно JQueryui, показывающее белый квадрат в середине страницы

EDIT: Я обнаружил, что это происходит только тогда, когда модальный: истина устанавливается на объект диалога из-за наложения.

EDIT: Я исправил эту проблему. Будет обновлен ответ в 8 часов. Версия 1.10.2 UI CSS Устраняет эту проблему. Угадайте, что я обновлю.

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>

источник

2013-04-04 Shaoden

Живой пример будет приятным. По крайней мере, некоторые скриншоты. –

Да им на работе, не могу загрузить фотобак, и у меня нет реплики, чтобы добавить изображение. – Shaoden

добавлено изображение, http://i48.tinypic.com/pp387.png – Shaoden

Версия 1.10.2 из UI CSS исправляет эту проблему. Угадай, что я обновлю.

Чтобы устранить проблему, измените внешний ресурс UI CSS на версию 1.10.2 вместо 1.10.1.

источник

2013-04-05 15:51:04 Shaoden

Я застрял на данный момент в jquery-ui 1.8.6. Вы точно знаете, что изменилось между 1.10.1 и 1.10.2? Я мог бы применить эквивалентное изменение к 1.8.6. Переход на 1.10 потребует выполнения полного набора тестов регрессии, что немного для этой небольшой проблемы с одним браузером. –

Я не могу, но, возможно, это поможет. https://jqueryui.com/changelog/1.10.2/ – Shaoden

Спасибо, но это не помогло. Я на самом деле попытался установить 1.10.1 и 1.10.2 CSS и применил некоторые из этих дельт к 1.8.6 CSS, но ничего не помогло. –

Заменить CSS с этим:

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

SEE ДЕМО ЗДЕСЬ

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

источник

2013-04-04 17:16:51

Да, это то, что я сделал. Спасибо за ответ. – Shaoden

Диалоговое окно JQueryui, показывающее белый квадрат в середине страницы

ответ

Смежные вопросы