Оверлей JQuery - метод wrapInner - PullRequest
Новая
       15

Оверлей JQuery - метод wrapInner

2 голосов
/ 06 февраля 2010

Я пытаюсь создать оверлей для div. Я пытаюсь сделать это с помощью JQuery. Вот как выглядит JS: 

 $('#container').wrapInner('<div />')
        .css('opacity', '0.5')
        .css('z-index', '2')
        .css('background','black')
        .attr('id','overlay')
    }
};

Обновление: это разметка перед применением функции JS: 

<body>
<form id="form1" runat="server">
<div id="header">My Header</div>
<div id="container">Container</div>
<div id="menu">
 <input type="text" />
 <input type="button" class="button" value="Go" onclick="overlay.toggleOverlay();return true" />        
</div>  
</form>

Кажется, это манипулирует div-контейнером так, как я не ожидал. Вот как выглядит разметка после запуска метода wrapInner: 

<div id="overlay" style="z-index: 2; filter: alpha(opacity=50); ZOOM: 1; background: black;">
<div>ContainerDiv</div>
</div>

Как будто метод wrapInner разделил контейнер div своих атрибутов. Может кто-нибудь предложить мне лучший способ сделать это?

Спасибо ..

Ответы [ 2 ]

2 голосов
/ 06 февраля 2010

Вызов «wrapInner» возвращает объект jQuery, который вы создали с помощью $ ('container>), а не div, который оборачивает контейнер. Попробуйте это: 

 $('#container').wrapInner('<div />').children()
    .css(/* ... */)
    .css(/* ... */)
    .attr('id', 'overlay');

[править] На самом деле я понятия не имею, что вы ожидаете, поэтому я не уверен, имеет ли смысл мой пример.

[редактировать снова] ОК, если вы хотите обернуть контейнер , тогда вы не хотите использовать "wrapInner ()". Просто используйте «wrap», а затем вызовите .parent () и добавьте свои CSS и значение «id».

1 голос
/ 07 февраля 2010

Мне нужен метод Wrap () 

 $('#container').wrap("<div id='overlay'> </div>")
        .css('opacity', '0.5')
        .css('z-index', '2')
        .css('background','black')

Обновление:

В конце концов он решил не оборачивать контейнерный контейнер оверлеем. Стиль становился все сложнее, поэтому я просто решил сделать оверлей div с контейнером, а затем поместить его поверх контейнера. Я использую значения смещения контейнера, чтобы сделать это. 

var left = $("#container").offset().left;
        var top = $("#container").offset().top;
        var width = $("#container").outerWidth();
        var height = $("#container").outerHeight();
        $("#overlay").css({ "left": left + "px", "top": top + "px", "width": width + "px", "height": height + "px", "opacity": "0.5" });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...