Jqueryui: как сделать тень вокруг диалогового окна?

Я пытаюсь создать тень вокруг диалогового окна jqueryui. Что-то вроде:

<div id="dialog-form" class="ui-widget-shadow ui-corner-all">
    Some stuff in the box with a shadow around it
</div>

а затем делаем:

$(function () {
  $("#dialog-form").dialog({
    resizable: false,
    height: 300,
    width: 350,
    modal: true
  });
});

в разделе JavaScript. Как сделать тень вокруг диалога dialog-form?


jquery jquery-ui jquery-ui-dialog
person James    schedule 10.08.2010    source источник
comment
Вы имеете в виду, что вам нужно модальное наложение, а также тень?   -  person Stephen    schedule 10.08.2010
comment
Насколько я могу судить, темароллер jQuery UI обманывает некоторые абсолютно позиционированные элементы. Не уверен, что это сработает в диалоге.   -  person Stephen    schedule 10.08.2010
comment
Что, если мне все равно, что его можно перетаскивать?   -  person James    schedule 10.08.2010

Ответы (2)


arrow_upward
33
arrow_downward

Вы можете добиться этого с помощью CSS3, но это не будет работать во всех браузерах.

  • ПЕРВЫЙ: В своем диалоговом вызове установите значение «dialogClass», равное имени класса по вашему выбору:
 dialogClass: 'dialogWithDropShadow'
  • ВТОРОЕ: В таблице стилей установите тень для класса, указанного в шаге 1.
<style type="text/css">
     .dialogWithDropShadow
     {
         -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);  
         -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 
     }
</style>

В качестве альтернативы вам придется использовать другие методы тени (диалоговое окно div, изображения и т. д.), которые будут сложными из-за того, что вы не контролируете HTML, отображаемый диалоговым окном пользовательского интерфейса jquery.

Удачи!

person ctorx    schedule 30.12.2010
comment
dialogClass: 'dialogWithDropShadow' // с кавычками - person Mark B; 27.02.2014
comment
Просто box-shadow в настоящее время подойдет для: IE9+, Firefox, Chrome, Opera и Safari 5.1.1. - person maets; 15.04.2014

arrow_upward
7
arrow_downward

Я боролся с этим и обнаружил, что функция box-shadow CSS3, вероятно, является лучшим решением. Хотя это не будет работать с IE8, я считаю это приемлемым. Вот что ты делаешь:

CSS

.ui-dialog-shadow { box-shadow: 0 0 0 7px rgba(0,0,0,0.1); }

Код диалогового окна

open: function() { $(".ui-dialog").addClass("ui-dialog-shadow"); },

Я попытался как можно точнее воспроизвести тень, которую мы имели в jQuery UI 1.6.

person Hawkee    schedule 20.03.2012
comment
Это работает для меня и выглядит красиво. Хотя я не вижу смысла добавлять дополнительный класс. Почему бы просто не сделать .ui-dialog { box-shadow: 0 0 0 7px rgba(0,0,0,0.1); }? - person Mauritz Hansen; 02.03.2020