0

私はこれが初めてなので、親切にしてください (;
Greasemonkey を使用して div レイヤーを追加しようとしていますが、正しく動作させることができません。

私の最終的な目標は、ユーザーが画面上にウィンドウを描画できるようにすること (または 2 回クリックすること) で、この領域以外のすべてがフェードアウトするようにすることです (暗い 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);
     }
    }
   }
  }


最初にz-index、div レイヤーが低すぎて、div レイヤーが可視レイヤーのすぐ後ろにあると考えました (そのため、現在インデックスが非常に高いのです)。しかし、より高いインデックスを使用しても効果はありませんでした。

position:fixedこれが役立つかもしれないと読んだので、私も使用しようとしましたが、そうではありませんでした。

機能するオーバーレイを作成するにはどうすればよいですか?

4

1 に答える 1

1

始めたばかりなので、jQueryと (この場合は) jQuery-UIを使用します。これにより、コーディングが大幅に簡素化され、難しい方法で「車輪の再発明」を試みることから解放されます。

jQuery-UI では、質問の 3 分の 2 が 1 行のコードで実行されます。

$("#dialog").dialog ( {modal: true} );

これは、箱から出してすぐにドラッグ可能でサイズ変更可能であることに注意してください!

Firefox で Greasemonkey を使用すると、jQuery や jQuery-UI を使用するコストもほとんどかかりません。スクリプトは 1 回 (スクリプトのインストール時または編集時に) ダウンロードされ、ローカル マシンから実行されます。それは素晴らしく、速いです。

以下は、サイズ変更可能なウィンドウを備えた「レイヤー」を Stack Overflow ページに追加する完全な Greasemonkey スクリプトです。

// ==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;        \
    }                           \
' );
于 2012-05-18T03:54:13.027 に答える