Всплывающие окно с затемнением фона

Поделиться1Сб, 21 Апр 2012 14:19:54

Автор: geka996
Заслуженный
Зарегистрирован: Пт, 1 Янв 2010
Сообщений: 183
Уважение: +17
Позитив: +133
Пол: Мужской
Последний визит:
Пн, 10 Дек 2012 22:27:19

Deff, Привет.
1.Вот как оно выглядит

2.Вот код

Код

<style type="text/css">
.Fon{
position: fixed;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background: black;
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity: 0.6;
z-index: 100
}
.windows {
z-index: 111;
width:350px;
height:150px;
border: 4px double black;
background: #dfdfdf;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
position: fixed;
bottom: 35%;
right: 35%;
}
.knopka{
z-index: 112;
width: 10px;
height: 10px;
border: 4px double black;
background: #dfdfdf;
padding: 5px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
position: absolute;
bottom: 160px;
right: -20px;
}
.x{
position: absolute;
bottom: 4px;
right: 6px;
}
</style>

<div class="windows">
<div class="win-top">

</div>

<div class="knopka">
<div class="x"><b>X</b></div>
</div></div>
<div class="Fon"></div>

3.При клике на картинку "Написать Администратору" оно должно загрузиться
4. При клике на крестик окно должно закрыться
5. Весь этот код не должен загружаться со страницей, только когда нажмётся кнопка "Написать Администратору"
6. Текстовик с установленным кодом Ссылка
Вродь нечего не забыл
Спасибо!

0

Поделиться2Сб, 21 Апр 2012 15:03:24

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11567
Последний визит:
Сегодня 14:58:41

geka996
Текущую картинку можно использовать ?

(Cобственно Ти уже всё сделал) Чичас скрипт приторочим

Отредактировано Deff (Сб, 21 Апр 2012 15:06:33)

0

Поделиться3Сб, 21 Апр 2012 15:07:50

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11567
Последний визит:
Сегодня 14:58:41

geka996
А написать администратору - это куда то должно отправляцо ?

geka996 написал(а):

только когда нажмётся кнопка "Написать Администратору"

(*И кнопки не увидел - ткни стрелкой на скриншоте

Отредактировано Deff (Сб, 21 Апр 2012 15:10:28)

0

Поделиться4Сб, 21 Апр 2012 15:07:55

Автор: geka996
Заслуженный
Зарегистрирован: Пт, 1 Янв 2010
Сообщений: 183
Уважение: +17
Позитив: +133
Пол: Мужской
Последний визит:
Пн, 10 Дек 2012 22:27:19

Deff, я очень хочу без картинок, а чисто кодом, можно так?

0

Поделиться5Сб, 21 Апр 2012 15:09:20

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11567
Последний визит:
Сегодня 14:58:41

geka996
Ну я твоим кодом и сделаю - Ответь на вопрос Выше

0

Поделиться6Сб, 21 Апр 2012 15:12:59

Автор: geka996
Заслуженный
Зарегистрирован: Пт, 1 Янв 2010
Сообщений: 183
Уважение: +17
Позитив: +133
Пол: Мужской
Последний визит:
Пн, 10 Дек 2012 22:27:19

Deff написал(а):

А написать администратору - это куда то должно отправляцо ?

Шас при нажатии на кнопку “Написать Администратору” перебрасывает на страницу лс админа, а как напишешь скрипт, нужно будет шоп отрывало окно (первый пост)

Deff написал(а):

И кнопки не увидел - ткни стрелкой на скриншоте

И ещё почему-то в опере, когда это окно то пропадает флеш

Отредактировано geka996 (Сб, 21 Апр 2012 15:28:55)

0

Поделиться7Сб, 21 Апр 2012 15:40:37

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11567
Последний визит:
Сегодня 14:58:41

geka996 написал(а):

И ещё почему-то в опере, когда это окно то пропадает флеш

Не понял ... а нафег флешь нужен - при окне ?

0

Поделиться8Сб, 21 Апр 2012 15:42:10

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11567
Последний визит:
Сегодня 14:58:41

geka996
И поставь код я начал с ним работать - а ти убрал

0

Поделиться9Сб, 21 Апр 2012 15:47:10

Автор: geka996
Заслуженный
Зарегистрирован: Пт, 1 Янв 2010
Сообщений: 183
Уважение: +17
Позитив: +133
Пол: Мужской
Последний визит:
Пн, 10 Дек 2012 22:27:19

Deff написал(а):

а нафег флешь нужен - при окне ?

Прост интересно, почему флеш пропадает, когда окно открывается

Deff написал(а):

И поставь код я начал с ним работать - а ти убрал

Извинтиляюсь, поставил обратно

0

Поделиться10Сб, 21 Апр 2012 16:02:39

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11567
Последний визит:
Сегодня 14:58:41

geka996
А отправка письма по какому событию происходит ?
(флешь тухнет, коли он не на переднем плане(эт завсегда так

Ксать код поменялся - пробуй

Код:

<style type="text/css">
.Fon{
position: fixed;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background: black;
filter:alpha(opacity=60);
 -moz-opacity:0.6;
 opacity: 0.6;
z-index: 100
   }
.windows {
z-index: 111;
width:350px;
height:150px;
border: 4px double black;
background: #dfdfdf;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
position: fixed;
bottom: 35%;
right: 35%;
}
.knopka{
cursor:pointer;
z-index: 112;
width: 10px;
height: 10px;
border: 4px double black;
background: #dfdfdf;
padding: 5px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
position: absolute;
bottom: 160px;
right: -20px;
   }
.x{
position: absolute;
bottom: 4px;
right: 6px;
}
  </style>

<!-- html_header -->
<div id="Glob">
<div class="windows">
<div class="win-top">
</div>
<div class="knopka"><div class="x" id=Xx><b>X</b></div></div>
<textarea rows="8" style="padding:7px 6px;width:332px">
asdsaaaaaaaaaaaaa
asdsdasdasdasdas

</textarea>


</div><div class="Fon"></div>
</div>
<script type="text/javascript">
$(".knopka #Xx").click(function (){
$("#Glob").toggle('slow')
});
</script>
<!-- html_header -->

Писать то нун где-то

Отредактировано Deff (Сб, 21 Апр 2012 16:03:59)

+1

Поделиться11Сб, 21 Апр 2012 16:05:32

Автор: geka996
Заслуженный
Зарегистрирован: Пт, 1 Янв 2010
Сообщений: 183
Уважение: +17
Позитив: +133
Пол: Мужской
Последний визит:
Пн, 10 Дек 2012 22:27:19

Deff, не знаю как объяснить, вот код этой кнопки она сделана спрайтом

Код:

<a href="/messages.php?action=new&amp;amp;uid=2"><img class="smstp2" src="http://truck-portal.ru/files/000b/82/02/39179.png" width="1" height="1" /></a>

0

Поделиться12Сб, 21 Апр 2012 16:10:23

Автор: geka996
Заслуженный
Зарегистрирован: Пт, 1 Янв 2010
Сообщений: 183
Уважение: +17
Позитив: +133
Пол: Мужской
Последний визит:
Пн, 10 Дек 2012 22:27:19

Deff написал(а):

Ксать код поменялся - пробуй

Наверно я не правильно объяснил
Вот полный код

Код:

<style type="text/css">
.Fon{
position: fixed;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background: black;
filter:alpha(opacity=60);
 -moz-opacity:0.6;
 opacity: 0.6;
z-index: 100
   }
.windows {
z-index: 111;
width:350px;
height:150px;
border: 4px double black;
background: #dfdfdf;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
behavior: url(border-radius.htc);
border-radius: 10px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
position: fixed;
bottom: 35%;
right: 35%;
}
.knopka{
z-index: 112;
width: 10px;
height: 10px;
border: 4px double black;
background: #dfdfdf;
padding: 5px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
position: absolute;
bottom: 160px;
right: -20px;
   }
.x{
position: absolute;
bottom: 4px;
right: 6px;
   }
.win-top {
width:100%; 
height:135px; 
}
.win-icq {
width:21px; 
height:16px; 
background:url(http://uploads.ru/i/e/s/C/esCnT.jpg) -43px 0px; 
}
.win-email {
width:21px; 
height:16px; 
background:url(http://uploads.ru/i/e/s/C/esCnT.jpg) -23px 0px; 
}
.win-admin {
width:21px; 
height:16px; 
background:url(http://uploads.ru/i/e/s/C/esCnT.jpg) -3px -0px; 
}
  </style>

<div class="windows">
<div class="win-top">
<font size="1">
<fieldset style="border: 1px solid ; padding: 10px;"><legend><span>Писать в случае:</span></legend>

<li>Нарушения авторских <a title="Не забудьте представить доказательства, что авторские права принадлежат Вам."  href="">прав</a></li>
<br>
<li>Жалобы.</li>
<br>
<li>С просьбой разблокировать.</li>

</fieldset>
</div>

<font color="blue">
<img class="win-icq" src="http://truck-portal.ru/files/000b/82/02/39179.png" width="1" height="1" title="ICQ" />
<b> : 620804508</b>

<img class="win-email" src="http://truck-portal.ru/files/000b/82/02/39179.png" width="1" height="1" title="E-MAIL" />
<a href="mailto:truck-portal@mail.ru">Truck-Portal</a>

<img class="win-admin" src="http://truck-portal.ru/files/000b/82/02/39179.png" width="1" height="1" title="ЛС" />
<a href="/messages.php?action=new&amp;amp;uid=2">Написать ЛС</a>
</font></font>

<div class="knopka">
<div class="x"><b>X</b></div>
</div></div>
<div class="Fon"></div>

Сделай прост, что бы это все появлялось при клике на
И закрывалось нажатием на крестик

Отредактировано geka996 (Сб, 21 Апр 2012 16:29:26)

0

Поделиться13Сб, 21 Апр 2012 16:44:26

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11567
Последний визит:
Сегодня 14:58:41

Код кнопки

<a href="/messages.php?action=new&uid=2">
<img class="smstp2" src="http://truck-portal.ru/files/000b/82/02/39179.png" width="1" height="1"/>
</a>

замени на такой

<img class="smstp2" src="http://truck-portal.ru/files/000b/82/02/39179.png" style="cursor:pointer;" width="1" height="1"/>

Весь код скрипта меняешь на такой

Код:

<style type="text/css">
.Fon{
position: fixed;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background: black;
filter:alpha(opacity=60);
 -moz-opacity:0.6;
 opacity: 0.6;
z-index: 100
   }
.windows {
z-index: 111;
width:350px;
height:150px;
border: 4px double black;
background: #dfdfdf;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
position: fixed;
bottom: 35%;
right: 35%;
}
.knopka{
cursor:pointer;
z-index: 112;
width: 10px;
height: 10px;
border: 4px double black;
background: #dfdfdf;
padding: 5px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
position: absolute;
bottom: 160px;
right: -20px;
   }
.x{
position: absolute;
bottom: 4px;
right: 6px;
}
  </style>

<!-- html_header -->
<div id="Glob">
<div class="windows">
<div class="win-top">
<font size="1">
<fieldset style="border: 1px solid ; padding: 10px;"><legend><span>Писать в случае:</span></legend>

<li>Нарушения авторских <a title="Не забудьте представить доказательства, что авторские права принадлежат Вам."  href="">прав</a></li>
<br>
<li>Жалобы.</li>
<br>
<li>С просьбой разблокировать.</li>

</fieldset>
</div>

<font color="blue">
<img class="win-icq" src="http://truck-portal.ru/files/000b/82/02/39179.png" width="1" height="1" title="ICQ" />
<b> : 620804508</b>

<img class="win-email" src="http://truck-portal.ru/files/000b/82/02/39179.png" width="1" height="1" title="E-MAIL" />
<a href="mailto:truck-portal@mail.ru">Truck-Portal</a>

<img class="win-admin" src="http://truck-portal.ru/files/000b/82/02/39179.png" width="1" height="1" title="ЛС" />
<a href="/messages.php?action=new&amp;amp;uid=2">Написать ЛС</a>
</font></font>

<div class="knopka">
<div class="x" id=Xx><b>X</b></div>
</div></div>
<div class="Fon"></div>
</div>
<script type="text/javascript">
$("img.smstp2,.knopka #Xx").click(function (){
$("#Glob").toggle('slow')
});
</script>
<!-- html_header -->

Отредактировано Deff (Сб, 21 Апр 2012 16:45:39)

+1

Поделиться14Сб, 21 Апр 2012 16:49:45

Автор: geka996
Заслуженный
Зарегистрирован: Пт, 1 Янв 2010
Сообщений: 183
Уважение: +17
Позитив: +133
Пол: Мужской
Последний визит:
Пн, 10 Дек 2012 22:27:19

Deff написал(а):

замени на такой

Deff написал(а):

Весь код скрипта меняешь на такой

Чет я не понял это оно уже должно работать? Если да то не работает

0

Поделиться15Сб, 21 Апр 2012 16:51:46

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11567
Последний визит:
Сегодня 14:58:41

geka996
:glasses: Окно на крест разве не сворачиваецо ?

0

Поделиться16Сб, 21 Апр 2012 16:55:26

Автор: geka996
Заслуженный
Зарегистрирован: Пт, 1 Янв 2010
Сообщений: 183
Уважение: +17
Позитив: +133
Пол: Мужской
Последний визит:
Пн, 10 Дек 2012 22:27:19

Deff написал(а):

Окно на крест разве не сворачиваецо ?

Сворачиваетцо, но ещё нун как-то сделать шоп оно вызывалось при нажатии на “Написать Администратору”
И шоп не открывалось само при обновлении

Отредактировано geka996 (Сб, 21 Апр 2012 16:57:02)

0

Поделиться17Сб, 21 Апр 2012 17:06:41

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11567
Последний визит:
Сегодня 14:58:41

geka996
Замени кнопку еще раз

<img id=Wsdqw2 class="smstp2" src="http://truck-portal.ru/files/000b/82/02/39179.png" style="position:relative;z-index:100;cursor:pointer;"/>

и код

Код:

	<style type="text/css">
.Fon{
position: fixed;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background: black;
filter:alpha(opacity=60);
 -moz-opacity:0.6;
 opacity: 0.6;
z-index: 100
   }
.windows {
z-index: 111;
width:350px;
height:150px;
border: 4px double black;
background: #dfdfdf;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
position: fixed;
bottom: 35%;
right: 35%;
}
.knopka{
cursor:pointer;
z-index: 112;
width: 10px;
height: 10px;
border: 4px double black;
background: #dfdfdf;
padding: 5px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
box-shadow: 0 0 10px rgba(0,0,0,0.5);
position: absolute;
bottom: 160px;
right: -20px;
   }
.x{
position: absolute;
bottom: 4px;
right: 6px;
}
  </style>

<!-- html_header -->
<div id="Glob" style="display:none">
<div class="windows">
<div class="win-top">
<font size="1">
<fieldset style="border: 1px solid ; padding: 10px;"><legend><span>Писать в случае:</span></legend>

<li>Нарушения авторских <a title="Не забудьте представить доказательства, что авторские права принадлежат Вам."  href="">прав</a></li>
<br>
<li>Жалобы.</li>
<br>
<li>С просьбой разблокировать.</li>

</fieldset>
</div>

<font color="blue">
<img class="win-icq" src="http://truck-portal.ru/files/000b/82/02/39179.png" width="1" height="1" title="ICQ" />
<b> : 620804508</b>

<img class="win-email" src="http://truck-portal.ru/files/000b/82/02/39179.png" width="1" height="1" title="E-MAIL" />
<a href="mailto:truck-portal@mail.ru">Truck-Portal</a>

<img class="win-admin" src="http://truck-portal.ru/files/000b/82/02/39179.png" width="1" height="1" title="ЛС" />
<a href="/messages.php?action=new&amp;amp;uid=2">Написать ЛС</a>
</font></font>

<div class="knopka">
<div class="x" id=Xx><b>X</b></div>
</div></div>
<div class="Fon"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#Wsdqw2,.knopka #Xx").click(function (){
$("#Glob").toggle('slow')
});
});
</script>
<!-- html_header -->

+1

Поделиться18Сб, 21 Апр 2012 17:10:03

Автор: geka996
Заслуженный
Зарегистрирован: Пт, 1 Янв 2010
Сообщений: 183
Уважение: +17
Позитив: +133
Пол: Мужской
Последний визит:
Пн, 10 Дек 2012 22:27:19

Deff, почти все работает, но как бы этого избавиться?

Добавлено:
Все, исправил.
Спасибо тебе Большущие!

Отредактировано geka996 (Сб, 21 Апр 2012 17:12:07)

0

Единый форум поддержки

Меню навигации

Пользовательские ссылки

Информация о пользователе

Всплывающие окно с затемнением фона

Сообщений 1 страница 18 из 18

Поделиться1Сб, 21 Апр 2012 14:19:54

Поделиться2Сб, 21 Апр 2012 15:03:24

Поделиться3Сб, 21 Апр 2012 15:07:50

Поделиться4Сб, 21 Апр 2012 15:07:55

Поделиться5Сб, 21 Апр 2012 15:09:20

Поделиться6Сб, 21 Апр 2012 15:12:59

Поделиться7Сб, 21 Апр 2012 15:40:37

Поделиться8Сб, 21 Апр 2012 15:42:10

Поделиться9Сб, 21 Апр 2012 15:47:10

Поделиться10Сб, 21 Апр 2012 16:02:39

Поделиться11Сб, 21 Апр 2012 16:05:32

Поделиться12Сб, 21 Апр 2012 16:10:23

Поделиться13Сб, 21 Апр 2012 16:44:26

Поделиться14Сб, 21 Апр 2012 16:49:45

Поделиться15Сб, 21 Апр 2012 16:51:46

Поделиться16Сб, 21 Апр 2012 16:55:26

Поделиться17Сб, 21 Апр 2012 17:06:41

Поделиться18Сб, 21 Апр 2012 17:10:03