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

Тема в разделе "Другие языки", создана пользователем silent9, 14 окт 2008.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. silent9

    silent9 Постоялец

    Регистр.:
    7 июн 2008
    Сообщения:
    136
    Симпатии:
    10
    Ищу пример скрипта всплывающего окна, но не то что открывается в новом окне браузера, а в том же окне и которое перетаскивается внутри одного окна
     
  2. megadude

    megadude

    Регистр.:
    6 сен 2006
    Сообщения:
    184
    Симпатии:
    66
    Задача не ясна :nezn:
    Если что-то открывать не в новом окне браузера, то ты его не сможешь перетаскивать(напр. всплывающие подсказки при наведении на ссылку или элемент формы).
    А чтоб можно было таскать по экрану(например при клике на картинку открывается поп-ап с большЕй картинкой и кнопкой "Закрыть"), то надо создавать новое окно браузера.
     
  3. Liver

    Liver

    Регистр.:
    24 сен 2008
    Сообщения:
    316
    Симпатии:
    91
    похоже ему нужен простой div с большим z-index.

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

    silent9 Постоялец

    Регистр.:
    7 июн 2008
    Сообщения:
    136
    Симпатии:
    10
    все можно перетаскивать.. на javascript'e делается и новое окно создавать не нужно

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

    megadude

    Регистр.:
    6 сен 2006
    Сообщения:
    184
    Симпатии:
    66
  6. silent9

    silent9 Постоялец

    Регистр.:
    7 июн 2008
    Сообщения:
    136
    Симпатии:
    10
    да) чтото типа этого

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

    PHP:
    <script language=JavaScript>
    var 
    SelectedItem;
    var 
    SelectedXSelectedY;
    var 
    aMouseXaMouseY;
    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 не силен)
     
  7. RedRabbit

    RedRabbit

    Регистр.:
    11 июл 2008
    Сообщения:
    608
    Симпатии:
    251
    Для этих целей подойдут скрипты от Ласто
     

    Вложения:

    • Lasto.rar
      Размер файла:
      154,5 КБ
      Просмотров:
      105
  8. megadude

    megadude

    Регистр.:
    6 сен 2006
    Сообщения:
    184
    Симпатии:
    66
    Рабочий код для 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>
    НО не работает в ФФ твой пример. Тока в ИЕ и Опере. Если устраивает - применяй, если нет - ищи далее :)
     
    silent9 нравится это.
  9. silent9

    silent9 Постоялец

    Регистр.:
    7 июн 2008
    Сообщения:
    136
    Симпатии:
    10
    странно.. как ты проверял? у меня везде работает, покрайней мере в опере, фф и ие точно
     
  10. megadude

    megadude

    Регистр.:
    6 сен 2006
    Сообщения:
    184
    Симпатии:
    66
    В ФФ 3.0.3 не работает перетаскивание. Т.е. точнее будет сказать, что в ФФ скрипт работает, НО не полностью :)
     
Статус темы:
Закрыта.