2013-07-13 18 views
0

Мой код выглядит следующим образом JQuery Ui: кнопкаКак сделать диалог щ J-запросов, модальный с помощью 1.8.17

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script> 
    <script type="text/javascript" src="Scripts/jquery-ui-1.8.17.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('<div id="dialogDiv">' + 'This is a dialog.' + '</div>').appendTo('body'); 
      $('#dialogDiv').dialog({ 
       resizable: false, 
       height: 140, 
       modal: true, 
       autoOpen: false, 
      }); 
      $('#btnLoad').click(function() { 
       $('#dialogDiv').dialog('open'); 
       return false; 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 
      <asp:Button ID="btnLoad" Text="Load" runat="server" /> 
     </div> 
    </form> 
</body> 
</html> 

Я хочу, чтобы мой диалог будет модальным, так что я не могу нажать на «Load» снова, пока мой диалог не будет закрыт. Но с моим выше кодом я все еще могу нажать кнопку «Загрузить».

Я использую JQuery ui 1.8.17. Может ли кто-нибудь сказать мне, где я ошибаюсь? Также появляются полосы прокрутки, хотя мой контент - всего лишь предложение. как скрыть только горизонтальную полосу прокрутки?

ответ

0

Обнаружено решение после чтения документации J-Query-UI. Решение состоит в том, что нам необходимо изменить ниже класс согласно нашей потребности:

.ui-widget-overlay { 
      left: 0; 
      top: 0; 
      width: 100%; 
      height: 100%; 
      position: absolute; 
      background: #aaaaaa ;/*important line to know that the class is in effect*/ 
      opacity: .3; 
      filter: Alpha(Opacity=30) /*{opacityOverlay}*/; 
     } 
0

Для чего это стоит, я просто проверил ваш код с jQuery 1.8.3 и jQuery UI 1.9.2, и он отлично работал. Возможно, это не сработало по сравнению с более старыми версиями?

+0

Что может быть решением для более старых версий? Также в каком браузере вы проверили этот код? –

+0

Я проверил Chrome. Что касается решения для более старых версий, я не уверен, что честно. Есть ли конкретная причина, по которой вы не можете использовать более новую версию? –

+0

yes ... Ресурс находится в централизованном сервере, и поскольку он используется в других проектах, я не могу попросить изменить версию. Также я попытался в версии 28.0.1500.71 хром и IE 10, но он не сработал ... Хотя он работает в FireFox v22. Есть ли какая-то конкретная причина, по которой он не работает в IE. Мне нужно разработать код в соответствии со стандартами IE. Можете ли вы мне помочь? \ –

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