Как получить скользящее наложение JavaScript для загрузки при запуске - PullRequest
Новая
       5

Как получить скользящее наложение JavaScript для загрузки при запуске

2 голосов
/ 18 августа 2010

Я хочу, чтобы при запуске я загружал окно наложения javascript и приглашал пользователей принять участие в опросе обратной связи.

Я думаю о наложении, которое появляется сверху экрана и позволяет людям либо перейти на опрос, либо выбрать «Нет, спасибо». Как я могу это сделать?

Я не хочу отдельное окно. Я хочу сделать это с помощью JavaScript, только CSS (нет jQuery - возможно ли это?)

Ответы [ 3 ]

1 голос
/ 19 августа 2010

Хорошо, вот вам кое-что для игры: -) 

<html>
<head>
<style type="text/css">
#banner { position: absolute; width: 100%; left: 0; }
.banner-content { width: 400px; height: 200px; margin: 0 auto; background: green; }
</style>
</head>
<body>
    <div id="banner">
        <div class="banner-content">text
            <a href="http://google.com">Yes</a>
            <a href="#" onclick="Banner.hide();return false">No</a>
        </div>
    <div>

<script type="text/javascript">
    var Banner=(function(){return{
        init: function(){
            this.ban = document.getElementById('banner');
            this.ban.style.top=-this.ban.offsetHeight;
            this.targetY=400;
            this.speed=15;  // increase this to slide faster
            this.delay=15;  // decrease to slide faster
            this.show();
        }
        ,show: function(){
            var self=this;
            this.anim=setInterval(function(){ self.slideDown() }, this.delay);
        }
        ,hide: function(){
            var self=this;
            this.anim=setInterval(function(){ self.slideUp() }, this.delay);
        }
        ,close: function(){ this.ban.style.display='none'; }
        ,slideDown: function(){
            var banSt = this.ban.style, banTop=parseInt(banSt.top.replace(/px/,'')), banH=this.ban.offsetHeight;
            if ((banTop+banH)<this.targetY) this.ban.style.top = banTop+this.speed;
            else clearInterval(this.anim);
        }
        ,slideUp: function(){
            var banSt = this.ban.style, banTop=parseInt(banSt.top.replace(/px/,'')), banH=this.ban.offsetHeight;
            if ((banTop+banH)>0) this.ban.style.top = banTop-this.speed;
            else clearInterval(this.anim);
        }
    }}())
    window.onload=Banner.init()
</script>
</body>
</html>
1 голос
/ 18 августа 2010

Чтобы достичь этого эффекта, вы просто прокрутите DIV с абсолютным позиционированием в окне просмотра.Если высота DIV равна 500, начните с top: -500 и увеличивайте это значение, пока DIV не будет центрирован в области просмотра.(Высота окна просмотра - 500/2)

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

0 голосов
/ 18 августа 2010

Я не буду писать здесь весь пример кода, но общая идея такова:

  • создайте элемент <div/> с требуемыми атрибутами стиля и z-index=0, чтобы он мог накладываться поверх других ваших элементов. Вы можете установить display на none, если хотите, чтобы он ожидал загрузки страницы. Не забудьте добавить контент с помощью «No Thanks», вызвав некоторую функцию скрытия.
  • Определите функцию JS, которая будет вызываться onLoad(), которая изменяет положение и display на block из <div/>, который мы настроили ранее

Вот и все, просто нужно написать некрасивый код на JavaScript. Я бы посоветовал делать не наложение слайдов, а центрирование, просто меньше кода для написания.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...