Скрипт всплывающего окна

Статус
В этой теме нельзя размещать новые ответы.
silent9

silent9

Постоялец
Регистрация
7 Июн 2008
Сообщения
136
Реакции
11
Ищу пример скрипта всплывающего окна, но не то что открывается в новом окне браузера, а в том же окне и которое перетаскивается внутри одного окна
 
Задача не ясна :nezn:
Если что-то открывать не в новом окне браузера, то ты его не сможешь перетаскивать(напр. всплывающие подсказки при наведении на ссылку или элемент формы).
А чтоб можно было таскать по экрану(например при клике на картинку открывается поп-ап с большЕй картинкой и кнопкой "Закрыть"), то надо создавать новое окно браузера.
 
похоже ему нужен простой div с большим z-index.

А движок использует какой нибудь яваскрипт фреймворк? Для них валом готовых решений.
 
megadude написал(а):
Задача не ясна :nezn:
Если что-то открывать не в новом окне браузера, то ты его не сможешь перетаскивать(напр. всплывающие подсказки при наведении на ссылку или элемент формы).
А чтоб можно было таскать по экрану(например при клике на картинку открывается поп-ап с большЕй картинкой и кнопкой "Закрыть"), то надо создавать новое окно браузера.
Нажмите для раскрытия...

все можно перетаскивать.. на javascript'e делается и новое окно создавать не нужно

Добавлено через 45 секунд
Liver написал(а):
похоже ему нужен простой div с большим z-index.

А движок использует какой нибудь яваскрипт фреймворк? Для них валом готовых решений.
Нажмите для раскрытия...

движок js-фреймворк не использует, но можно поключить.. мне хотябы пример найти
 
да) чтото типа этого

вот нашел, выкладываю без картинок, но вроде и так понятно:

PHP: 
<script language=JavaScript>
var SelectedItem;
var SelectedX, SelectedY;
var aMouseX, aMouseY;
var name;

function Move(ClickedItem)
{
SelectedItem = ClickedItem;
SelectedX = SelectedItem.style.pixelLeft;
SelectedY = SelectedItem.style.pixelTop;
aMouseX = event.clientX;
aMouseY = event.clientY;
document.onmousemove = Drag;
document.onmouseup = Drop;
}

function Drag()
{
SelectedItem.style.left = SelectedX + (event.clientX - aMouseX);
SelectedItem.style.top = SelectedY + (event.clientY - aMouseY);
return false;
}

function Drop()
{
document.onmousemove = null;
document.onmouseup = null;
}

function show_bar(ev,name) {

MouseX = 200 + document.body.scrollLeft;
MouseY = 50 + document.body.scrollTop;
obj = document.getElementById("win");

obj.style.top = MouseY + 10;
obj.style.left = MouseX;
obj.style.visibility = "visible";

}

function hide_bar() {
document.getElementById("win").style.visibility="hidden"
}

function show_opac(real) {
 if (real==0) {

  document.getElementById("win").style.filter = "alpha(opacity=100)";
  document.getElementById("win").style.opacity = 1;
 }
 else {
  document.getElementById("win").style.filter = "alpha(opacity=95)";
  document.getElementById("win").style.opacity = 0.95;
 }
}
</script>

Технология "окно в окне" применяется такими авторитетными веб ресурсами как Yandex (вход в почту) и Bigmir (авторизация на сайте) <span style='cursor: pointer; color: #FF0000' onclick='show_bar(event)'>и</span> представляет собой открывающееся окно с формой для авторизации. 
На самом деле в такое окно можно поместить все что угодно, от простого текста до элементов формы и изображений.
Создание такого <span style='cursor: pointer; color: #FF0000' onclick='show_bar(event)'>всплывающего окна</span> осуществляется при помощи JavaScript и свойства position: absolute, которое позволяет свободно позиционировать элементы в документе.


<table cellpadding=0 cellspacing=0 id=win height=100 style='overflow: auto; position: absolute; visibility: hidden;  filter: alpha(opacity=95); opacity: 0.95'>
 <tr valign=top>
  <td>
   <img src=top_left.gif align=right hspace=0>
  </td>
  <td width=250 background=top.gif height=6></td>
  <td>
   <img src=top_right.gif align=left hspace=0>
  </td>
 </tr>
 <tr valign=top> 
  <td colspan=3 style='border-right: 1px solid #000000; border-left: 1px solid #000000; height: 15px; font: 11px verdana; color: #000000; cursor: move' background=top_panel.gif onmousedown="Move(win)">
       &nbsp&nbsp;Информация
    <span style='padding-left: 155px'>
    <img src=close.gif style='cursor: pointer' title='Закрыть' onclick='hide_bar()'> 
    </span>
  </td>
 </tr>
 <tr valign=top>
  <td id=main colspan=3 style='word-wrap: true; cursor: pointer; background-color: #EEEEEE; height: 110px; border-left: 1px solid #000000; border-right: 1px solid #000000; font: 11px verdana; padding: 8px' onmouseover='show_opac(0)' onmouseout='show_opac(1)'>
   <font color=#0000DE>Тестовое окно</font><br><br>
   <img src=candy.jpg hspace=0 align=right>
   Данное окно удобно <br>использовать в качестве <br>расширенной
   подсказки<br><br>
   <font color=#008000>www.webobzor.net</font>
<div style=" overflow: scroll; overflow-x: hidden; height: 150px;">rfgergegrg<p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></div>
  </td>
 </tr>
 <tr valign=top>
  <td>
   <img src=bottom_left.gif align=right hspace=0>
  </td>
  <td id=bmain width=250 background=bottom.gif height=6></td>
  <td>
   <img src=bottom_right.gif align=left hspace=0>
  </td>
 </tr>  
  </td>
 </tr>
</table>

вот только окон может быть много, win1, win2 ... winN
что нужно добавить в код? (в js не силен)
 
silent9 написал(а):
Ищу пример скрипта всплывающего окна, но не то что открывается в новом окне браузера, а в том же окне и которое перетаскивается внутри одного окна
Нажмите для раскрытия...

Для этих целей подойдут скрипты от Ласто
 

Вложения

  • Lasto.rar
    154,5 KB · Просмотры: 105
silent9 написал(а):
да) чтото типа этого

вот нашел, выкладываю без картинок
только окон может быть много, win1, win2 ... winN
что нужно добавить в код? (в js не силен)
Нажмите для раскрытия...
Рабочий код для 2-х окон(дальше по аналогии хоть до бесконечности).
HTML: 
<script language=JavaScript>
var SelectedItem;
var SelectedX, SelectedY;
var aMouseX, aMouseY;

function Move(ClickedItem) {
  SelectedItem = ClickedItem;
  SelectedX = SelectedItem.style.pixelLeft;
  SelectedY = SelectedItem.style.pixelTop;
  aMouseX = event.clientX;
  aMouseY = event.clientY;
  document.onmousemove = Drag;
  document.onmouseup = Drop;
}

function Drag() {
  SelectedItem.style.left = SelectedX + (event.clientX - aMouseX);
  SelectedItem.style.top = SelectedY + (event.clientY - aMouseY);
  return false;
}

function Drop() {
  document.onmousemove = null;
  document.onmouseup = null;
}

function show_bar(ev, id) {
  MouseX = ev.clientX + document.body.scrollLeft;
  MouseY = ev.clientY + document.body.scrollTop;
  obj = document.getElementById("win_" + id);
  
  obj.style.top = MouseY + 10;
  obj.style.left = MouseX;
  obj.style.visibility = "visible";
}

function hide_bar(id) {
  document.getElementById("win_" + id).style.visibility="hidden"
}

function show_opac(real, id) {
 if (real==0) {
   document.getElementById("win_" + id).style.filter = "alpha(opacity=100)";
   document.getElementById("win_" + id).style.opacity = 1;
 } else {
   document.getElementById("win_" + id).style.filter = "alpha(opacity=95)";
   document.getElementById("win_" + id).style.opacity = 0.95;
 }
}
</script>


<span style='cursor: pointer; color: #FF0000' onclick='show_bar(event, 1)'>Tooltip 1</span> <br />
<span style='cursor: pointer; color: #FF0000' onclick='show_bar(event, 2)'>Tooltip 2</span> <br />


<table id="win_1" style='position:absolute; visibility:hidden; filter:alpha(opacity=95); opacity: 0.95'>
  <tr valign=top> 
    <td colspan=3 style='border:1px solid #000000; height:15px; font:11px verdana; color:#000000; cursor:move' onmousedown="Move(win_1)">
      Text 1<span style='padding-left:155px'><img src=close.gif style='cursor: pointer' title='Text' onclick='hide_bar(1)'></span>
    </td>
  </tr>
  <tr>
    <td id=main colspan=3 style='cursor:pointer; height:50px; border:1px solid #000000; font:11px verdana; padding:8px' onmouseover='show_opac(0, 1)' onmouseout='show_opac(1, 1)'>
      Text 1
    </td>
  </tr>
</table>

<table id="win_2" style='position:absolute; visibility:hidden; filter:alpha(opacity=95); opacity: 0.95'>
  <tr valign=top> 
    <td colspan=3 style='border:1px solid #000000; height:15px; font:11px verdana; color:#000000; cursor:move' onmousedown="Move(win_2)">
      Text 2<span style='padding-left:155px'><img src=close.gif style='cursor: pointer' title='Text' onclick='hide_bar(2)'></span>
    </td>
  </tr>
  <tr>
    <td id=main colspan=3 style='cursor:pointer; height:50px; border:1px solid #000000; font:11px verdana; padding:8px' onmouseover='show_opac(0, 2)' onmouseout='show_opac(1, 2)'>
      Text 2
    </td>
  </tr>
</table>
НО не работает в ФФ твой пример. Тока в ИЕ и Опере. Если устраивает - применяй, если нет - ищи далее :)
 
megadude написал(а):
не работает в ФФ твой пример. Тока в ИЕ и Опере. Если устраивает - применяй, если нет - ищи далее :)
Нажмите для раскрытия...

странно.. как ты проверял? у меня везде работает, покрайней мере в опере, фф и ие точно
 
silent9 написал(а):
странно.. как ты проверял? у меня везде работает, покрайней мере в опере, фф и ие точно
Нажмите для раскрытия...
В ФФ 3.0.3 не работает перетаскивание. Т.е. точнее будет сказать, что в ФФ скрипт работает, НО не полностью :)
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху