Всплывающее окно

@flame33 · Регистрация: 18.07.2010

Author24 — интернет-сервис помощи студентам

Привет всем!
Очень стыдно создавать такую тему, но я почти не знаю JS, поэтому нужна помощь.
Есть всплывающее окно, работает через jQuery. Вызывается при нажатии на ссылку:
Код:

HTML5    
        
    Скопировано
1
<p><a href="#" onCLick="$('#popup_bug').togglePopup(); return false;">Показать окно</a></p>

А как можно вызвать это окно просто из скрипта JS?

@Kdn · 11.02.2011, 17:23

flame33, Ты конечно извини. Но мог бы написать, что вычитал на Хабре пример, где чувак создаёт метод при помощи JQuery вот его реализация:

JavaScript    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$.fn.togglePopup = function(){
   //detect whether popup is visible or not
   if($('#popup').hasClass('hidden'))
   {
    //hidden - then display
    //when IE - fade immediately
    if($.browser.msie)
    {
     $('#opaco').height($(document).height()).toggleClass('hidden');
    }
    else
    //in all the rest browsers - fade slowly
    {
     $('#opaco').height($(document).height()).toggleClass('hidden').fadeTo('slow', 0.7);
    }
 
    $('#popup')
     .html($(this).html())
     .alignCenter()
     .toggleClass('hidden');
   }
   else
   {
    //visible - then hide
    $('#opaco').toggleClass('hidden').removeAttr('style');
    $('#popup').toggleClass('hidden');
   }
  };

Как я понимаю ты хочешь сделать это на чистом JavaScript?

@flame33 · 11.02.2011, 17:31 **[ТС]**

Да это именно этот пример с Хабра.
Мне нужно вызвать окно просто из скрипта javascript т.е. без какого-либо события, по факту его выполнения (событие определяет PHP скрипт). В этом примере он вызывал при нажатии на ссылке, как переделать не знаю, т.к. не знаком с синтаксисом JS. Помогите разобраться...

@Kdn · 11.02.2011, 22:20

Тьфу ты, я тебя не так понял.
Ну так и вызывай

JavaScript    
        
    Скопировано
1
2
$('#popup_bug').togglePopup()         //для одного окна
$('#popup_reference').togglePopup()      //для второго

@flame33 · 11.02.2011, 22:36 **[ТС]**

Спасибо большое! Пошел изучать JS

Добавлено через 7 минут
Почему то везде работает, кроме оперы (11). Выдает ошибку:

Uncaught exception: TypeError: '$('#opaco').height($(document).height() ).toggleClass' is not a function

Error thrown at line 27, column 9 in <anonymous function: $.fn.togglePopup>() in http://localhost/ssangyong/ind... Itemid=39:
$('#opaco').height($(document).height()) .toggleClass('hidden').fadeTo('slow', 0.7)
called from line 2, column 4 in http://localhost/ssangyong/ind... Itemid=39:
$('#popup_bug').togglePopup()

В чем может быть проблема?

@flame33 · 13.02.2011, 12:52 **[ТС]**

Нашел причину, по которой в Опере не работает - на странице подгружается еще mootools. Кто-нибудь знает как можно избежать конфликта, т.к. без mootools обойтись не могу.

@Good-bad man · 13.02.2011, 14:18

flame33, после подключения jQuery, но перед подключением MooTools впишите:

HTML5    
        
    Скопировано
1
<script type="text/javascript">jQuery.noConflict();</script>

И теперь в скрипте, вместо jQuery функции $ используйте функцию jQuery:

JavaScript    
        
    Скопировано
1
2
jQuery('#popup_bug').togglePopup()         //для одного окна
jQuery('#popup_reference').togglePopup()      //для второго

@flame33 · 13.02.2011, 19:40 **[ТС]**

Беда какая-то с Оперой, только в ней не работает. Прописал код после подключения jQuery:

HTML5    
        
    Скопировано
1
<script type="text/javascript">jQuery.noConflict();</script>

Потом переделал скрипт для всплывающего окошка:

JavaScript    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//additional properties for jQuery object
 
jQuery(document).ready(function(){
   //align element in the middle of the screen
   jQuery.fn.alignCenter = function() {
      //get margin left
      var marginLeft =  - jQuery(this).width()/2 + 'px';
      //get margin top
      var marginTop =  - jQuery(this).height()/2 + 'px';
      //return updated element
      return jQuery(this).css({'margin-left':marginLeft, 'margin-top':marginTop});
   };
 
   jQuery.fn.togglePopup = function(){
     //detect whether popup is visible or not
     if(jQuery('#popup').hasClass('hidden'))
     {
       //hidden - then display
       //when IE - fade immediately
       if(jQuery.browser.msie)
       {
        jQuery('#opaco').height(jQuery(document).height()).toggleClass('hidden')
                   .click(function(){jQuery(this).togglePopup();});
       }
       else
       //in all the rest browsers - fade slowly
       {
         jQuery('#opaco').height(jQuery(document).height()).toggleClass('hidden').fadeTo('slow', 0.7)
                    .click(function(){jQuery(this).togglePopup();});
       }
 
       jQuery('#popup')
         .html(jQuery(this).html())
         .alignCenter()
         .toggleClass('hidden');
     }
     else
     {
       //visible - then hide
       jQuery('#opaco').toggleClass('hidden').removeAttr('style').unbind('click');
       jQuery('#popup').toggleClass('hidden');
     }
   };
});

Во всех браузерах работает, в Опере ошибка:

Uncaught exception: TypeError: 'jQuery('#opaco').height(jQuery(document ).height()).toggleClass' is not a function

Error thrown at line 28, column 9 in <anonymous function: jQuery.fn.togglePopup>() in http://localhost/.../jquery-add-ons.js:
jQuery('#opaco').height(jQuery(document) .height()).toggleClass('hidden').fadeTo( 'slow', 0.7)
called from line 2, column 4 in http://localhost/...:
jQuery('#popup_bug').togglePopup();

Vovan-VE · 14.02.2011, 15:39

Какая версия jQuery и Оперы?

Новые блоги и статьи Все статьи Все блоги /
Миграция монолита в Event-Driven микросервисную архитектуру на C# stackOverflow 11.04.2025 Монолитная архитектура – классический подход к разработке программного обеспечения. Это приложение, построенное как единое целое, где все компоненты тесно связаны между собой. Большинство проектов. . .	Go в Kubernetes: Управление ресурсами golander 11.04.2025 Разработчики Go-приложений в Kubernetes часто сталкиваются с неожиданными проблемами производительности и даже внезапными отказами контейнеров. Причина этого кроется в особенностях взаимодействия. . .	Агрегаты и сущности в DDD микросервисах Javaican 10.04.2025 Разработка современных программных систем часто приводит на распутье: монолит или микросервисы? Даже при выборе микросервисной архитектуры многие команды сталкиваются с проблемой правильного. . .	Многопоточность в C#: Task и параллельное программирование UnmanagedCoder 10.04.2025 Современные процессоры уже давно перестали наращивать тактовую частоту в пользу увеличения количества ядер. Это создало интересную ситуацию: разработчики, привыкшие к последовательному. . .	Линейное решение нелинейной задачи будет иметь приблизительный результат вычисления для метода обработки данных из double buffering. Hrethgir 10.04.2025 Вообще изначально я пренебрёг квадратурой числа, но потом понял, что для вычисления приблизительного значения - сгодится, формулу можно будет корректировать по ходу. Это потому что прямое соотношение. . .
Переменные в Python py-thonny 10.04.2025 Переменная в программировании — это символическое имя, связанное с областью памяти, в которой хранится значение. Она позволяет получать доступ к данным через понятные человеку идентификаторы, а не. . .	Многопоточность в C#: Task и асинхронные операции UnmanagedCoder 10.04.2025 Многопоточность позволяет выполнять несколько операций одновременно, что важно для решения двух основных задач: повышения скорости выполнения вычислительно-сложных операций и сохранения отзывчивости. . .	Запуск контейнеров Docker на ARM64 Mr. Docker 09.04.2025 Появление таких решений, как Apple M1/ M2, AWS Graviton, Ampere Altra и Raspberry Pi, сделало использование ARM-систем обыденностью для многих разработчиков и DevOps-инженеров. При этом Docker,. . .	Vue SFC компонент на PHP с Fusion Jason-Webb 09.04.2025 PHP на сервере и JavaScript на клиенте — классическое сочетание, которое, несмотря на свою эффективность, создает определенный когнитивный диссонанс при разработке. В этом контексте появляются. . .	TypeScript vs JavaScript: Отличия и когда что использовать Reangularity 09.04.2025 JavaScript появился в 1995 году как творение Брендана Эйха и быстро стал основой интерактивности в вебе. За свою историю он прошел путь от простого языка для манипуляций с DOM до полноценной. . .

@flame33 1 / 1 / 0 Регистрация: 18.07.2010 Сообщений: 33
	11.02.2011, 17:31 [ТС]
	Да это именно этот пример с Хабра. Мне нужно вызвать окно просто из скрипта javascript т.е. без какого-либо события, по факту его выполнения (событие определяет PHP скрипт). В этом примере он вызывал при нажатии на ссылке, как переделать не знаю, т.к. не знаком с синтаксисом JS. Помогите разобраться... 0

@flame33 1 / 1 / 0 Регистрация: 18.07.2010 Сообщений: 33
	11.02.2011, 22:36 [ТС]
	Спасибо большое! Пошел изучать JS Добавлено через 7 минут Почему то везде работает, кроме оперы (11). Выдает ошибку: Uncaught exception: TypeError: '$('#opaco').height($(document).height() ).toggleClass' is not a function Error thrown at line 27, column 9 in <anonymous function: $.fn.togglePopup>() in http://localhost/ssangyong/ind... Itemid=39: $('#opaco').height($(document).height()) .toggleClass('hidden').fadeTo('slow', 0.7) called from line 2, column 4 in http://localhost/ssangyong/ind... Itemid=39: $('#popup_bug').togglePopup() В чем может быть проблема? 0

@flame33 1 / 1 / 0 Регистрация: 18.07.2010 Сообщений: 33
	13.02.2011, 12:52 [ТС]
	Нашел причину, по которой в Опере не работает - на странице подгружается еще mootools. Кто-нибудь знает как можно избежать конфликта, т.к. без mootools обойтись не могу. 0

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	14.02.2011, 15:39
	Какая версия jQuery и Оперы? 0