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?

Ответ 1

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

FIRST: в диалоговом вызове установите значение "dialogClass" равным имени класса по вашему выбору:

 dialogClass: 'dialogWithDropShadow'

SECOND: в вашей таблице стилей установите тень на класс, указанный на шаге 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 ui dialog.

Удачи!

Ответ 2

Я боролся с этим и обнаружил, что функция CSS3 box-shadow, вероятно, является лучшим решением. Хотя он не будет работать с 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, насколько я мог.