jQueryUI: наложение, как на странице themeroller

Question

Я пытаюсь выяснить, как сделать наложение, как на странице themeroller: http://jqueryui.com/themeroller.Я попытался посмотреть на источник, но не похоже, что тема применяется через jquery ...

Answer 1

Я думаю, они просто пытаются показать вам класс ui-widget-overlay и ui-widget-shadow платформы jqueryui css на странице themeroller.

http://jqueryui.com/docs/Theming/API#Overlay_.26_Shadow

Я просто попытался скопировать html и css в jsfiddle, и это просто работает. http://jsfiddle.net/Fcs9y/

Это никак не связано с виджетами пользовательского интерфейса, которые я предполагаю.

Answer 2

Это своего рода скрытая функция, но если вы добавите modal: true к своим параметрам (например, width: или buttons:), она создаст тот же эффект, блокируя фон.

Answer 3

Это делает трюк:

JavaScript:

$("#element-to-be-dialogged").dialog({
    ...
    dialogClass: 'dialog-with-rounded-shadow'
    ...
});

CSS:

.dialog-with-rounded-shadow {
    box-shadow: 0 0 0 10px rgba(0,0,0,0.2);
}

JSFiddle: http://jsfiddle.net/martinba/8zwLqodm/

Answer 4

#overlaySpan {
 font:Arial, Helvetica, sans-serif;
 font-size:14px;
 font-weight:bold;
 color:white;
 background: url(../images/icons/notifications/close.png) no-repeat;
 cursor:pointer;
 position:absolute;
 top:-8px;
 right:-8px;
 width:20px;
 height:20px;
 padding:0;
 text-align:center;
 z-index:102;

}
#overlayBack {
    margin:0;
    background-color:black;
    position:fixed;
    top:0;
    left:0;
    padding:0;
    width:100%;
    height:100%;
    z-index:99;
    filter:alpha(opacity=70);
    -khtml-opacity: 0.7;
    opacity: 0.7;
    -moz-opacity:0.7;
}
#overlayDiv {
    -moz-border-radius: 4px;
    border-radius: 4px;
    display:none;
    background-color:white;
    position: fixed;
    top: 50%;
    left: 50%;
    padding:2px;
    z-index:101;
    width:500px;
    padding:10px;
}
#overlayDivBack {
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color:black;
    position: fixed;
    top: 50%;
    left: 50%;
    padding:2px;
    z-index:100;
    width:520px;
    padding:10px;
    filter:alpha(opacity=40);
    -khtml-opacity: 0.4;
    opacity: 0.4;
    -moz-opacity:0.4;
}

Это мой css.Я использую свое собственное наложение.

<div id="overlayBack"></div>
<div id="overlayDiv"><span id="overlaySpan"></span></div>
<div id="overlayDivBack"></div>

Просто даю вам идею разобраться.Просто используйте jquery, чтобы показать и скрыть их.Это все о z-index.

Answer 5

Наложение на большинстве страниц - фиксированный элемент (div) с шириной и высотой, установленными на 100% или некоторыми значениями пикселей. Тогда у него есть цвет и непрозрачность - вот и все.

Если вы хотите точно знать на странице themeroller, отметьте Firebug или Inspement Element с помощью Chrome. Я вижу, что они используют некоторые свойства -mor-border-radius и -webkit-border-radius для границы.

Answer 6

Работает так: из js файла с именем: http://static.jquery.com/ui/themeroller/scripts/app.js название метода: themeGalleryBehaviors

// loading and viewing gallery themes
$('#themeGallery a')
    .bind('click', function() {     
        updateCSS(hash.clean(this.href.split('?')[1]));
        hash.updateHash(hash.clean(this.href.split('?')[1]), true);
        return false;
    })

вызов метода updateCSS добавляет

function updateCSS(locStr){
    //once 1.6 final is ready: $("head").append('<link href="/themeroller/css/parseTheme.css.php?'+ locStr +'" type="text/css" rel="Stylesheet" />');
    $("link[href*=parseTheme\\.css\\.php]:last").after('<link href="/themeroller/css/parseTheme.css.php?'+ locStr +'" type="text/css" rel="Stylesheet" />');

Это, в свою очередь, накладывает магию наложения. Я не следовал коду полностью, надеюсь, я сделал достаточно.