Затемнение страницы на JavaScript

Старый mweb

Модератор: [mweb team]

Затемнение страницы на JavaScript

Сообщение Berezkin Вт янв 20, 2009 13:12

Делаю затемнение страницы на JavaScript. Вот код скрипта:
Код: Выделить всё
var value = 0;

function setOpacity() {
   value += .3;
   var testObj = document.getElementById('test');
   
   testObj.style.width = "100%";
   testObj.style.height = "100%";
   testObj.style.display = "block";
   testObj.style.opacity = value/10;
   testObj.style.filter = 'alpha(opacity=' + value*10 + ')';
   myTimeout = setTimeout("setOpacity()", 1);
   
   if ((value/10) >= .5) {
      clearTimeout(myTimeout);
   }
}

function removeOpacity() {
   value -= .3;
   var testObj = document.getElementById('test');
   
   myTimeout2 = setTimeout("removeOpacity()", 1);
   testObj.style.opacity = value/10;
   testObj.style.filter = 'alpha(opacity=' + value*10 + ')';
   
   if ((value/10) <= 0) {
      testObj.style.display = "none";
      clearTimeout(myTimeout2);
   }
}


И код html:
Код: Выделить всё
<html>

<head>
<style type="text/css">
body {
   margin: 0;
   padding: 0;
}

#test {
   background: #000;
   display: none;
   opacity: 0;
   filter: alpha(opacity=0);
   position: absolute;
   top: 0;
   left: 0;
   z-index: 100;
}
</style>
</head>

<body>
<div id="test">
   <div style="width: 100px; height: 30px; text-align: center; position: relative; top: 50%; left: 50%; background: #fff; border: #f00 1px solid;">
      <a href="#" onclick="removeOpacity();">Закрыть</a>
   </div>
</div>


<a href="#" onclick="setOpacity();">
   Открыть сообщение об ошибке
</a>

</body>
</html>


Есть пара вопросов:
1. Как-нить можно обойтись без глобальной переменной в скрипте?
2. Див со ссылкой внутри дива-фона (того, что затемняет страницу) становится тоже прозрачным. Как этого избежать?
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Re: Затемнение страницы на JavaScript

Сообщение Muerto Вт янв 20, 2009 16:38

1. А чем тебе глобальная переменная не понравилась?
2.
Код: Выделить всё
<html>

<head>
<style type="text/css">
body {
   margin: 0;
   padding: 0;
}

#test {
   background: #000;
   display: none;
   opacity: 0;
   filter: alpha(opacity=0);
   position: absolute;
   top: 0;
   left: 0;
   z-index: 100;
}
#warning { width: 100px; height: 30px; text-align: center; position: absolute; top: 50%; left: 50%; background: #fff; border: #f00 1px solid; z-index:101; display:none; }
</style>
<script>
    var value = 0;

    function setOpacity() {
       value += .3;
       var testObj = document.getElementById('test');
       
       testObj.style.width = "100%";
       testObj.style.height = "100%";
       testObj.style.display = "block";
       testObj.style.opacity = value/10;
       testObj.style.filter = 'alpha(opacity=' + value*10 + ')';
       myTimeout = setTimeout("setOpacity()", 1);
       
       if ((value/10) >= .5) {
          clearTimeout(myTimeout);
       }
      document.getElementById('warning').style.display = "block";
    }

    function removeOpacity() {
       value -= .3;
       var testObj = document.getElementById('test');
       
       myTimeout2 = setTimeout("removeOpacity()", 1);
       testObj.style.opacity = value/10;
       testObj.style.filter = 'alpha(opacity=' + value*10 + ')';
       
       if ((value/10) <= 0) {
          testObj.style.display = "none";
          clearTimeout(myTimeout2);
       }
      document.getElementById('warning').style.display = "none";
    }
</script>
</head>

<body>
<div id="test"></div>
   <div id="warning">
      <a href="#" onclick="removeOpacity();">Закрыть</a>   
</div>


<a href="#" onclick="setOpacity();">
   Открыть сообщение об ошибке
</a>

</body>
</html>
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Re: Затемнение страницы на JavaScript

Сообщение Berezkin Вт янв 20, 2009 17:29

По второму пункту спасибо! Сам чет затупил и не допер сделать еще один position: absolute;
А по первому подумалось, что не красиво я делаю и без глобальной переменной было бы гораздо круче.
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Re: Затемнение страницы на JavaScript

Сообщение Padonak Ср янв 21, 2009 10:21

Berezkin а твой скрипт будут смотреть тока в ИЕ штолле?
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону

Re: Затемнение страницы на JavaScript

Сообщение Berezkin Ср янв 21, 2009 14:45

Почему, в Мозилле тоже работает (я проверял вроде).

Еще вопрос по верстке:
Как сделать отступ у дива по 10px от левого и правого края страницы, если у него стоит width: 100%?
Получается сделать отступ только слева... width: 100% убирать нельзя, иначе не правильно отображается вот такая менюшка http://www.alistapart.com/d/slidingdoors/v1/ex5.html
Еще нельзя поставить margin: 0 10px 0 10px; у боди, потому что все другие элементы должны прижиматься к краям страницы.
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Re: Затемнение страницы на JavaScript

Сообщение Padonak Ср янв 21, 2009 17:40

...style.filter = 'alpha работает в ФФ, и Опере? Изображение
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону

Re: Затемнение страницы на JavaScript

Сообщение Berezkin Ср янв 21, 2009 18:41

padonak
Нет, но зато работает style.opacity! -06-
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Re: Затемнение страницы на JavaScript

Сообщение Muerto Ср янв 21, 2009 19:26

Berezkin писал(а):Получается сделать отступ только слева...

А справа отодвинешь right:10px;
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Re: Затемнение страницы на JavaScript

Сообщение Berezkin Ср янв 21, 2009 21:03

Muerto
О, спасибо! Попробую.
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Re: Затемнение страницы на JavaScript

Сообщение Berezkin Чт янв 22, 2009 12:32

Не двигается справа, хоть тресни...
upd: т.е. двигается, но уходит за пределы окна (т.е. появляется горизонтальный скролл)
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Re: Затемнение страницы на JavaScript

Сообщение Muerto Пт янв 23, 2009 14:49

Berezkin
Кинь весь код страницы или дай ссылку, если в сети.
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Re: Затемнение страницы на JavaScript

Сообщение Berezkin Пн янв 26, 2009 15:19

Весь код дать не могу (там его оооочень много), да и кусок кода дать не могу иначе ничего не понятно будет.
Короче примерно код такой:
Код: Выделить всё
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css" media="screen">
    body {
      background:#fff;
      margin:0;
      padding:0;
      color:#000;
     }
   #top {
      background: #f00;
      height: 50px;
      margin-bottom: 20px;
   }
   #bottom {
      width: 100%;
      height: 50px;
      background: #00f;
   }
  </style>
</head>

<body>

<div id="top">
</div>

<div id="bottom">
</div>

</body>
</html>


Надо чтобы у bottom были отступы слева и справа 10px, но при этом у него нельзя убирать width: 100%;. И при этом у body должно быть padding: 0; margin: 0;, чтобы остальные элементы прижимались к краям.
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Re: Затемнение страницы на JavaScript

Сообщение logonsp Ср июн 16, 2010 16:41

А вот у меня вопрос? Если такой код работает по одной картинке, каким образом "раздать" ссылки по, к примеру, трём картинкам? Чтобы можно было одну открыть, или другую...или третью...
logonsp
Прохожий
 
Сообщения: 3
Зарегистрирован: Ср июн 16, 2010 15:56

Re: Затемнение страницы на JavaScript

Сообщение Padonak Ср июн 16, 2010 19:54

не совсем понятно о чем вопрос
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону

Re: Затемнение страницы на JavaScript

Сообщение logonsp Ср июн 16, 2010 20:28

Padonak писал(а):не совсем понятно о чем вопрос


Короче говоря. У меня есть несколько изображений. Я понял -- как реализовать такой код для одного изображения. Пытался вставить в java-код дополнительные id через запятую, и создал соответствующие id. Но, тем не менее, при нажатии на одну, вторую, третью ссылку всё равно выпадает первое изображение.
logonsp
Прохожий
 
Сообщения: 3
Зарегистрирован: Ср июн 16, 2010 15:56

Re: Затемнение страницы на JavaScript

Сообщение Skay Ср июн 16, 2010 22:09

money + sleep = awesome
Аватара пользователя
Skay
Хронический Астматик
 
Сообщения: 1373
Зарегистрирован: Вс мар 10, 2002 1:01

Re: Затемнение страницы на JavaScript

Сообщение logonsp Чт июн 17, 2010 15:53

Skay писал(а):http://habrahabr.ru/blogs/webdev/38642/


Мне не понять.
logonsp
Прохожий
 
Сообщения: 3
Зарегистрирован: Ср июн 16, 2010 15:56


Вернуться в Архив

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 17

cron