Jqueryui: как сделать тень вокруг диалогового окна? - PullRequest
Новая
       5

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

12 голосов
/ 10 августа 2010

Я пытаюсь нанести тень на диалоговое окно 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 диалога?

Ответы [ 2 ]

31 голосов
/ 31 декабря 2010

Вы можете достичь этого с помощью 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.

Удачи!

5 голосов
/ 20 марта 2012

Я боролся с этим и обнаружил, что функция 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 настолько близко, насколько я мог.

...