0 / 0 / 0
Регистрация: 28.02.2014
Сообщений: 17

Модальное окно - автоматическое открытие при обновлении страницы

13.04.2014, 20:26. Показов 6086. Ответов 8
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Есть скрипт модального окна, но окно открывается только при нажатии кнопки, а надо чтобы открывалось автоматически при каждом обновление страницы, что надо изменить??

index.html
HTML5
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
<!DOCTYPE html>
<!--[if IE 7]>         <html class="ie7"> <![endif]-->
<!--[if IE 8]>         <html class="ie8"> <![endif]--> 
<head> 
<meta charset=utf-8 />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>11</title>
<!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
    <style type="text/css">
    .clear {
      zoom: 1;
      display: block;
    }
    </style>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>  
 
 
    <section class="centerUp">
        <h1>111</h1>
        <a class="modalLink" href="#modal1">Click Me</a>
        <p>111</p>
    </section>
 
    <div class="overlay"></div>
 
    <div id="modal1" class="modal">
        <p class="closeBtn">Close</p>
        <h2>Your Content Here</h2>
    </div>
    
 
    
        
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script type='text/javascript' src='js/jquery.modal.js'></script>
    <script type='text/javascript' src='js/site.js'></script>
</body>
</html>
jquery.modal.js
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
(function($){
 
    $.fn.modal= function(options){
       
        options = $.extend({
            trigger: '.modalLink',
            olay: 'div.overlay',
            modals: 'div.modal',
            animationEffect: 'fadeIn',
            animationSpeed: 400,
            moveModalSpeed: 'slow',
            background: '000',
            opacity: 0.8,
            openOnLoad: false,
            docClose: true,
            closeByEscape: true,
            moveOnScroll: true,
            resizeWindow: true,
            video:'',
            videoClass:'video',
            close:'.closeBtn'
            
        },options);
       
        var olay = $(options.olay);
        var modals = $(options.modals);
        var currentModal;
        var isopen=false;
       
        if (options.animationEffect==='fadein'){options.animationEffect = 'fadeIn';}
        if (options.animationEffect==='slidedown'){options.animationEffect = 'slideDown';}
        
        olay.css({opacity : 0});
                
        if(options.openOnLoad) {
            openModal();
        }else{
            olay.hide();
            modals.hide();
        }
        
        $(options.trigger).bind('click', function(e){
            e.preventDefault();
            
            if ($('.modalLink').length >1) {
                getModal = $(this).attr('href');
                currentModal = $(getModal);    
            }else{
                currentModal = $('.modal');
            }
            openModal();
        });
        
        function openModal(){
            $('.' + options.videoClass).attr('src',options.video);
            modals.hide();
            currentModal.css({
                top:$(window).height() /2 - currentModal.outerHeight() /2 + $(window).scrollTop(),
                left:$(window).width() /2 - currentModal.outerWidth() /2 + $(window).scrollLeft()
            });
                
            if(isopen===false){
                olay.css({opacity : options.opacity, backgroundColor: '#'+options.background});
                olay[options.animationEffect](options.animationSpeed);
                currentModal.delay(options.animationSpeed)[options.animationEffect](options.animationSpeed); 
            }else{
                currentModal.show();
            }
            
            isopen=true;
        }
        
        function moveModal(){
            modals
            .stop(true)
            .animate({
            top:$(window).height() /2 - modals.outerHeight() /2 + $(window).scrollTop(),
            left:$(window).width() /2 - modals.outerWidth() /2 + $(window).scrollLeft()
            },options.moveModalSpeed);
        }
        
        function closeModal(){
            $('.' + options.videoClass).attr('src',''); 
            isopen=false;
            modals.fadeOut(100, function(){
                if (options.animationEffect === 'slideDown') {
                    olay.slideUp();
                }else if (options.animationEffect === 'fadeIn') {
                    olay.fadeOut();
                }
            });
            return false;
        }
        
        if(options.docClose){
            olay.bind('click', closeModal);
        }
        
        $(options.close).bind('click', closeModal);
        
        if (options.closeByEscape) {
            $(window).bind('keyup', function(e){
                if(e.which === 27){
                    closeModal();
                }
            });
        }
        
        if (options.resizeWindow) {
            $(window).bind('resize', moveModal);
        }else{
            return false;
        }
        
        if (options.moveOnScroll) {
            $(window).bind('scroll', moveModal);
        }else{
            return false;
        }
    };
})(jQuery);
jquery.modal.min.js
JavaScript
1
(function(e){e.fn.modal=function(t){function o(){e("."+t.videoClass).attr("src",t.video);r.hide();i.css({top:e(window).height()/2-i.outerHeight()/2+e(window).scrollTop(),left:e(window).width()/2-i.outerWidth()/2+e(window).scrollLeft()});if(s===false){n.css({opacity:t.opacity,backgroundColor:"#"+t.background});n[t.animationEffect](t.animationSpeed);i.delay(t.animationSpeed)[t.animationEffect](t.animationSpeed)}else{i.show()}s=true}function u(){r.stop(true).animate({top:e(window).height()/2-r.outerHeight()/2+e(window).scrollTop(),left:e(window).width()/2-r.outerWidth()/2+e(window).scrollLeft()},t.moveModalSpeed)}function a(){e("."+t.videoClass).attr("src","");s=false;r.fadeOut(100,function(){if(t.animationEffect==="slideDown"){n.slideUp()}else if(t.animationEffect==="fadeIn"){n.fadeOut()}});return false}t=e.extend({trigger:".modalLink",olay:"div.overlay",modals:"div.modal",animationEffect:"fadeIn",animationSpeed:400,moveModalSpeed:"slow",background:"000",opacity:.8,openOnLoad:false,docClose:true,closeByEscape:true,moveOnScroll:true,resizeWindow:true,video:"",videoClass:"video",close:".closeBtn"},t);var n=e(t.olay);var r=e(t.modals);var i;var s=false;if(t.animationEffect==="fadein"){t.animationEffect="fadeIn"}if(t.animationEffect==="slidedown"){t.animationEffect="slideDown"}n.css({opacity:0});if(t.openOnLoad){o()}else{n.hide();r.hide()}e(t.trigger).bind("click",function(t){t.preventDefault();if(e(".modalLink").length>1){getModal=e(this).attr("href");i=e(getModal)}else{i=e(".modal")}o()});if(t.docClose){n.bind("click",a)}e(t.close).bind("click",a);if(t.closeByEscape){e(window).bind("keyup",function(e){if(e.which===27){a()}})}if(t.resizeWindow){e(window).bind("resize",u)}else{return false}if(t.moveOnScroll){e(window).bind("scroll",u)}else{return false}}})(jQuery)
site.js
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
 
    $('.modalLink').modal({
        trigger: '.modalLink',          // id or class of link or button to trigger modal
        olay:'div.overlay',             // id or class of overlay
        modals:'div.modal',             // id or class of modal
        animationEffect: 'slideDown',   // overlay effect | slideDown or fadeIn | default=fadeIn
        animationSpeed: 400,            // speed of overlay in milliseconds | default=400
        moveModalSpeed: 'slow',         // speed of modal movement when window is resized | slow or fast | default=false
        background: 'a2d3cd',           // hexidecimal color code - DONT USE #
        opacity: 0.7,                   // opacity of modal |  0 - 1 | default = 0.8
        openOnLoad: false,              // open modal on page load | true or false | default=false
        docClose: true,                 // click document to close | true or false | default=true    
        closeByEscape: true,            // close modal by escape key | true or false | default=true
        moveOnScroll: true,             // move modal when window is scrolled | true or false | default=false
        resizeWindow: true,             // move modal when window is resized | true or false | default=false
        video: 'http://player.vimeo.com/video/2355334?color=eb5a3d',    // enter the url of the video
        videoClass:'video',             // class of video element(s)
        close:'.closeBtn'               // id or class of close button
    });
});
Сам скрипт
modal.rar
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
13.04.2014, 20:26
Ответы с готовыми решениями:

Автоматическое Модальное окно
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; &lt;html...

Модальное окно при запуске страницы
Такая задача стоит &quot;При первых трех запусках страницы сайта должно всплывать модальное окно&quot; как это можно реализовать? В сети...

Модальное окно на JavaScript при загрузке страницы
Добрый день! Видел много готовых решений для всплывающих окон при клике на ссылку или картинку. Не смог найти решения для модального...

8
2 / 2 / 2
Регистрация: 31.10.2013
Сообщений: 66
13.04.2014, 23:41
что за глупость? в файле стилей поищите у класса modal1 айди modal(я так понял) - "display: none", если найдете удалите.
П.С.зачем вам такой большой скрипт для модального окна?
0
0 / 0 / 0
Регистрация: 28.02.2014
Сообщений: 17
14.04.2014, 19:44  [ТС]
В самом окне меня все устраивает. ... только окно вызывается кнопкой, а мне надо что бы автоматически при обновлении страницы
0
2 / 2 / 2
Регистрация: 31.10.2013
Сообщений: 66
14.04.2014, 21:28
Что вам не понятно? В файле main.css вот это:
CSS
1
2
3
4
5
6
7
8
9
10
.modal {
  display: none;
  background: #eee;
  padding: 0 20px 20px;
  overflow: auto;
  z-index: 1001;
  position: absolute;
  width: 500px;
  min-height: 300px;
}
Заменяет на :
CSS
1
2
3
4
5
6
7
8
9
10
.modal {
 /** display: none;**/
  background: #eee;
  padding: 0 20px 20px;
  overflow: auto;
  z-index: 1001;
  position: absolute;
  width: 500px;
  min-height: 300px;
}
0
0 / 0 / 0
Регистрация: 28.02.2014
Сообщений: 17
15.04.2014, 00:17  [ТС]
Вы не поняли... Окно вызывается кнопкой Click me, а мне не надо эта кнопка вообще, мне надо что бы окно открывалось само при загрузке страницы.... тут не в стилях дело
0
2 / 2 / 2
Регистрация: 31.10.2013
Сообщений: 66
15.04.2014, 11:23
Так оно и будет висеть при загрузки страницы. Если вы хотите именно через JS, то попробуйте вызвать "openModal()", название говорит само за себя.

Добавлено через 10 часов 13 минут
или тупо вызовите обработчик - "$('.modalLink').click()"
0
0 / 0 / 0
Регистрация: 28.02.2014
Сообщений: 17
15.04.2014, 13:29  [ТС]
А вы не могли бы подробней описать как вызвать OpenModal, просто я в ява скрипте еще новичек
0
2 / 2 / 2
Регистрация: 31.10.2013
Сообщений: 66
15.04.2014, 15:07
Кликните здесь для просмотра всего текста
в файле site.js после строки
JavaScript
1
$(document).ready(function(){
пишите :
JavaScript
1
openModal();
или
JavaScript
1
$('.modalLink').click();


Добавлено через 8 минут
вот, нашел самый нормальный способ(надо было просто перевести комментарий с английского). Замените содержимое файла site.js на:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
 
    $('.modalLink').modal({
        trigger: '.modalLink',          // id or class of link or button to trigger modal
        olay:'div.overlay',             // id or class of overlay
        modals:'div.modal',             // id or class of modal
        animationEffect: 'slideDown',   // overlay effect | slideDown or fadeIn | default=fadeIn
        animationSpeed: 400,            // speed of overlay in milliseconds | default=400
        moveModalSpeed: 'slow',         // speed of modal movement when window is resized | slow or fast | default=false
        background: 'a2d3cd',           // hexidecimal color code - DONT USE #
        opacity: 0.7,                   // opacity of modal |  0 - 1 | default = 0.8
        openOnLoad: true,              // open modal on page load | true or false | default=false
        docClose: true,                 // click document to close | true or false | default=true    
        closeByEscape: true,            // close modal by escape key | true or false | default=true
        moveOnScroll: true,             // move modal when window is scrolled | true or false | default=false
        resizeWindow: true,             // move modal when window is resized | true or false | default=false
        video: 'http://player.vimeo.com/video/2355334?color=eb5a3d',    // enter the url of the video
        videoClass:'video',             // class of video element(s)
        close:'.closeBtn'               // id or class of close button
    });
});
0
0 / 0 / 0
Регистрация: 28.02.2014
Сообщений: 17
15.04.2014, 15:39  [ТС]
не один из способов не работает((
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
15.04.2014, 15:39
Помогаю со студенческими работами здесь

Модальное окно автоматическое открытие
Есть скрипт модального окна, но окно открывается только при нажатии кнопки, а надо чтобы открывалось автоматически при каждом обновление...

Автоматическое открытие страницы с баннером при запуске браузера
Здравствуйте! Несколько дней назад комп поймал вирус в браузер-автоматическое открытие страницы с баннером при запуске браузера, потом...

Как сделать автоматическое открытие страницы при подключении к WiFi ?
Нужно сделать так подключаешься к точке, и автоматом открывается определенная страница в браузере. Как это сделать?

Как сделать,автоматическое модальное окно?)
&lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt;

Мне нужно: 1)что бы при обновлении страницы не возникало новой сесси; 2)удалять сессию с серевера после того, как клиет закрыл свое окно
У меня возникли проблемы с сессиями(не в универе :)) Мне нужно: 1)что бы при обновлении страницы не возникало новой сесси; 2)удалять...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

Новые блоги и статьи
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer
8Observer8 08.02.2026
Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств
8Observer8 07.02.2026
Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru