1

我正在编写一个 jQuery 插件。在这个插件中，我将现有BODY内容包装在 a 中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/

在上面的演示中，您将看到“显示警报”按钮显示“你好！”的警报。点击时。如果您触发插件并关闭插件，您会注意到“显示警报”按钮现在有两个与之关联的单击处理程序，因此在单击时会显示两个警报。

我的插件将无法控制它正在运行的页面的内容。当我将正文内容包装在 a 中时，有没有办法可以防止内联脚本重新运行DIV？

4

4 回答 4

2

$('script', $('body')).remove();在你的代码之前

于 2012-11-14T18:47:42.817 回答
0

如果您希望您的插件在任意页面上工作，您可能需要考虑另一种方法，您的叠加层仅覆盖原始内容。我相信这会比包装和隐藏、移动/删除脚本节点等技巧更可靠。

于 2012-11-14T18:54:37.880 回答
0

我只是想分享我在构建叠加层方面的方法，也许它会对某人有所帮助。有点不同，div是在页面上添加的，并没有隐藏已有的div元素。可能会快一点，因为脚本不会搜索所有 div dom 元素。

第一的

//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 回答