1

私はjQueryプラグインを書いています。このプラグインでは、既存のBODYコンテンツを でラップしDIVて非表示にします。

var $originalBodyContents = $('body').wrapInner('<div>').children('div').hide();

次に、プラグインは独自のオーバーレイDIVを に追加し、BODYプラグイン マジックを実行します。ユーザーがプラグインを終了すると、オーバーレイが削除されDIV、ラップが解除されます。

$originalBodyContents.children().unwrap();

このデモでわかるように、これはうまく機能しています:
http://jsfiddle.net/vKddB/1/

ただし、ページにコンテンツ スクリプトがある場合は、ラップが発生したときにすべてが再読み込みされ、コードが再度実行されます。このデモでわかるように、これは多くの予期しない動作を引き起こしています:
http://jsfiddle.net/vKddB/3/

上記のデモでは、[アラートを表示] ボタンに「こんにちは!」というアラートが表示されていることがわかります。クリックしたとき。プラグインを起動してプラグインを閉じると、[アラートを表示] ボタンに 2 つのクリック ハンドラーが関連付けられていることがわかります。これにより、クリックすると 2 つのアラートが表示されます。

私のプラグインは、それが実行されているページのコンテンツを制御できません。本文の内容を でラップするときに、インライン スクリプトが再実行されないようにする方法はありDIVますか?

4

4 に答える 4

2

$('script', $('body')).remove();コードの前に

于 2012-11-14T18:47:42.817 に答える
0

プラグインを任意のページで機能させたい場合は、オーバーレイが元のコンテンツだけをカバーする別のアプローチを検討することをお勧めします。これは、ラップと非表示、スクリプトノードの移動/削除などのトリックよりも信頼性が高いと思います。

于 2012-11-14T18:54:37.880 に答える
0

オーバーレイを膨らませることで私のアプローチを共有したいだけです。多分それは誰かを助けるでしょう。少し異なります。divはページに追加され、既存のdiv要素を非表示にしません。スクリプトがすべてのdivdom要素を検索するわけではないので、おそらく少し速くなります。

最初

//create the overlay with
$('<div class="overlay" />').appendTo('body').show();

//close the overlay with
$('.overlay').remove();

//css used for overlay
.overlay
{
    background-color: #363636;
    background-image: url('a_nice_bg_image.png');
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 1000;
    opacity: .55;
    filter:alpha(opacity=55);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
}
于 2012-11-14T19:03:03.273 に答える
0

本体に div を追加し、その位置を絶対に設定し、高い z-index を設定し、サイズを変更してコンテンツ全体をカバーします。

        var $overlay = $('<div>')
        .css({
            position: 'absolute',
            top: 0,
            left: 0,
            width: $(document).width() + 'px',
            height: $(document).height() + 'px',
            backgroundColor: '#f00',
            'z-index': 10000
        })
        .appendTo('body');

このように（最小限の変更を加えた元のコード）：http://jsfiddle.net/Ya3DG/4/ :)

于 2012-11-14T19:22:12.633 に答える