我是新手,所以请多关照(;
我正在尝试使用 Greasemonkey 添加 div 层,但我无法让它正常工作。
我的最终目标是让用户在屏幕上绘制一个窗口(或点击两次),除此区域外的所有内容都应该淡出(添加深色 div 层)。
但是,目前我只想为每个站点添加一个可见层。这是我的第一次尝试(根本没有用):
var CSSNJE = '#Test_divnje {height:100px; width:100px; background-color:red;
position:absolute; top: 200px; left: 400px; z-index:2147483647}';
var CSSNJE = '<style type="text/css">'+ CSSNJE +'</style>';
document.write(CSSNJE);
var DIVNJE = '<DIV id="Test_divnje"></DIV>';
document.write(DIVNJE);
我用谷歌搜索了这段代码,它适用于一些页面但不是很多:
makeLayer('LYR1',400,250,100,100,'red',1,2147483647);
function makeLayer(id,L,T,W,H,bgColor,visible,zIndex) {
if (document.getElementById) {
if (document.getElementById(id)) {
alert ('Layer with this ID already exists!');
return;
}
var ST = 'position:absolute'
+'; left:'+L
+'; top:'+T
+'; width:'+W
+'; height:'+H
+'; clip:rect(0,'+W+','+H+',0)'
+'; visibility:'
+(null==visible || 1==visible ? 'visible':'hidden')
+(null==zIndex ? '' : '; z-index:'+zIndex)
+(null==bgColor ? '' : '; background-color:'+bgColor);
var LR = '<DIV id='+id+' style="'+ST+'"></DIV>'
if (document.body) {
if (document.body.insertAdjacentHTML)
document.body.insertAdjacentHTML("BeforeEnd",LR);
else if (document.createElement
&& document.body.appendChild) {
var newNode = document.createElement('div');
newNode.setAttribute('id',id);
newNode.setAttribute('style',ST);
document.body.appendChild(newNode);
}
}
}
}
首先我认为我的 div 层的 z-index
太低而且我的 div 层就在可见层后面(这就是为什么我的索引现在这么高)但是使用更高的索引确实没有帮助。
我也尝试过使用 position:fixed
因为我读到这可能会有帮助,但它没有。
如何制作有效的叠加层?
最佳答案
由于您刚开始,请使用 jQuery和(在这种情况下)jQuery-UI .它使编码变得非常简单,并且会让您免于尝试以艰难的方式“重新发明轮子”的痛苦。
在 jQuery-UI 中,问题的三分之二是在 1 行代码中完成的:
$("#dialog").dialog ( {modal: true} );
请注意,这是可拖动且可调整大小的,开箱即用!
有了 Firefox 上的 Greasemonkey,使用 jQuery 和 jQuery-UI 几乎没有任何成本。脚本下载一次(安装或编辑脚本时),然后从本地计算机运行。它又好又快。
这是一个完整的 Greasemonkey 脚本,它向 Stack Overflow 页面添加了一个带有可调整大小的窗口的“层”:
// ==UserScript==
// @name _Add a User-interactive layer to a web page.
// @namespace _pc
// @include http://stackoverflow.com/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js
// @resource jqUI_CSS http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css
// @resource IconSet1 http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-icons_222222_256x240.png
// @resource IconSet2 http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-icons_454545_256x240.png
// @grant GM_addStyle
// @grant GM_getResourceText
// @grant GM_getResourceURL
// ==/UserScript==
//--- Add our custom dialog using jQuery. Note the multi-line string syntax.
$("body").append (
'<div id="gmOverlayDialog"> \
Resize with the control in the lower-left, or by dragging any edge.<br><br> \
\
Click the x, or press the Escape key to close. \
</div> \
'
);
//--- Activate the dialog.
$("#gmOverlayDialog").dialog ( {
modal: true,
title: "Click and drag here.",
zIndex: 83666 //-- This number doesn't need to get any higher.
} );
/**********************************************************************************
EVERYTHING BELOW HERE IS JUST WINDOW DRESSING (pun intended).
**********************************************************************************/
/*--- Process the jQuery-UI, base CSS, to work with Greasemonkey (we are not on a server)
and then load the CSS.
*** Kill the useless BG images:
url(images/ui-bg_flat_0_aaaaaa_40x100.png)
url(images/ui-bg_flat_75_ffffff_40x100.png)
url(images/ui-bg_glass_55_fbf9ee_1x400.png)
url(images/ui-bg_glass_65_ffffff_1x400.png)
url(images/ui-bg_glass_75_dadada_1x400.png)
url(images/ui-bg_glass_75_e6e6e6_1x400.png)
url(images/ui-bg_glass_95_fef1ec_1x400.png)
url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)
*** Rewrite the icon images, that we use, to our local resources:
url(images/ui-icons_222222_256x240.png)
becomes
url("' + GM_getResourceURL ("IconSet1") + '")
etc.
*/
var iconSet1 = GM_getResourceURL ("IconSet1");
var iconSet2 = GM_getResourceURL ("IconSet2");
var jqUI_CssSrc = GM_getResourceText ("jqUI_CSS");
jqUI_CssSrc = jqUI_CssSrc.replace (/url\(images\/ui\-bg_.*00\.png\)/g, "");
jqUI_CssSrc = jqUI_CssSrc.replace (/images\/ui-icons_222222_256x240\.png/g, iconSet1);
jqUI_CssSrc = jqUI_CssSrc.replace (/images\/ui-icons_454545_256x240\.png/g, iconSet2);
GM_addStyle (jqUI_CssSrc);
//--- Add some custom style tweaks.
GM_addStyle ( ' \
div.ui-widget-overlay { \
background: red; \
opacity: 0.6; \
} \
' );
关于javascript - 使用 Greasemonkey 脚本添加动态 div 层(覆盖)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10638947/