jQueryUI：覆盖，就像在美化器页面

我想弄清楚如何做如覆盖整个页面上的覆盖：http://jqueryui.com/themeroller。我试图寻找源头，但它似乎并不像通过任何的jQuery应用的主题...jQueryUI：覆盖，就像在美化器页面

2011-03-28 Parris

我只是试图模仿“叠加和S hadow类“示例 – Parris 2011-03-28 06:49:58

可能的重复[jQuery UI：如何使用ui-widget-overlay本身？]（http://stackoverflow.com/questions/3782944/jquery-ui-how-to-use-ui-widget -overlay逐本身） – ripper234 2012-04-16 11:25:37

这是一种隐藏功能，但如果您将modal: true添加到您的参数（如width:或buttons:），它会创建相同的效果，从而阻止背景。

来源

2012-03-16 00:07:41 spsaucier

是这样的：从 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" />');

这反过来做一些覆盖魔法。我并没有完全遵循代码，我希望我做得足够。

来源

2011-03-28 06:45:53

大多数页面上的覆盖图是固定位置元素（div），宽度和高度设置为100％或某些像素值。然后它有颜色和不透明 - 多数民众赞成它。

如果您想确切地了解整个美乐家网页，请使用Chrome浏览器检查Firebug或Inspect Element。我可以看到他们正在为边框使用一些-mor-border-radius和-webkit-border-radius属性。

来源

2011-03-28 07:02:05 Karol

#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的。

来源

2011-03-28 07:04:25 littlealien

我认为他们只是试图向你展示整理者页面上的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小部件无关。

来源

2011-03-28 07:05:59 Quincy

该做的伎俩：

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

来源

2014-08-08 19:22:15 Martin

jQueryUI：覆盖，就像在美化器页面

回答

相关问题