Question

我试图弄清楚如何在themeroller页面上进行叠加：http://jqueryui.com/themeroller。我试着查看源代码，但似乎主题不是通过任何jquery应用...

Answer 1

我认为他们只是想在themeroller页面上向你展示jqueryui css框架的ui-widget-overlay和ui-widget-shadow类。

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

我只是尝试将html和css复制到jsfiddle，它只是起作用。 http://jsfiddle.net/Fcs9y/

这与我认为的UI小部件无关。

Answer 2

这是一种隐藏功能，但是如果您在参数中添加modal: true（例如width:或buttons:），它会产生相同的效果，阻挡背景。

Answer 3

像这样工作：来自名为http://static.jquery.com/ui/themeroller/scripts/app.js的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" />');

这反过来会产生一些重叠的魔力。我没有完全遵循代码，我希望我做得足够。

Answer 4

大多数页面上的叠加是固定定位元素（div），宽度和高度设置为100％或某些像素值。然后它有颜色和不透明度 - 就是这样。

如果您想准确了解themeroller页面，请使用Chrome检查Firebug或Inspect Element。我可以看到他们正在使用-mor-border-radius和-webkit-border-radius属性作为边框。

Answer 5

#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 6

这就是诀窍：

<强> 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/

jQueryUI：覆盖，就像在themeroller页面上一样

6 个答案: