Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.86/7: Рейтинг темы: голосов - 7, средняя оценка - 4.86
Братуха
5 / 5 / 5
Регистрация: 15.07.2012
Сообщений: 773
1

Как сделать плавную задержку модального окна

15.10.2012, 10:43. Просмотров 1262. Ответов 12
Метки нет (Все метки)

Привет всем. У меня есть скрипт модального окна, но я столкнулся с проблемой задержки его, ну что бы оно открывалось плавно. У меня есть вот такой скрипт
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function () {
                            
    $('<div id="ContentDialog"><h2 id="ContentDialogTitle"></h2><div id="ContentDialogContent"><img src="i/ajax-loader.gif" /></div><a href="#" id="hlContentDialogClose">Close</a></div>').appendTo('body');
    $('<div id="ModalOverlay"></div>').appendTo('body');
 
    $(".contentDialog").click(function (e) {
        $("#ContentDialog #ContentDialogContent").load($(this).attr("href"));
        $("#ContentDialog #ContentDialogTitle").text($(this).attr("title"));
        $("#ContentDialog").show();
        $("#ModalOverlay").show();
        $("body").scrollTop(0);
        e.preventDefault();
    });
 
    $("#hlContentDialogClose").click(function (e) {
        $("#ContentDialog").hide();
        $("#ModalOverlay").hide();
        e.preventDefault();
    });
});
в интернете искал нашел вот это
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
jQuery(document).ready(function(){
 
var intervalID;
jQuery("li").hover(
  function () {
    var popup = jQuery(this).find("div");
 
    intervalID=setTimeout(
        function() {
        popup.fadeIn();
        }, 500);
    
  },
  function () {
    jQuery("li div").fadeOut();
    clearInterval(intervalID);
  }
);
 
});
вот так выглядит ссылка на модальное окно
HTML5
1
<a href="content1.htm" class="contentDialog" title="Content 1">Load content1.htm</a>
как не пытался сделать ничего не вышло помогите пожалуйста. Зарание большое спасибо
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
15.10.2012, 10:43
Ответы с готовыми решениями:

Как сделать закрытие модального окна по нажатию кнопки "отправить"?
&lt;div id=&quot;callOrderModal&quot; class=&quot;call-order-modal&quot;&gt; &lt;h3&gt;Заполните форму заявки&lt;/h3&gt; ...

Нужно сделать автоматическое появление модального окна
Доброго всем времени суток. Есть такого рода задачка. Пишу сайт. На нём при входе сразу...

Как сделать появление модального окна после просмотра видео?
Мне нужно что бы после просмотра видео открывалось модальное окно. Но только в том случае если...

Как написать скрипт для скрытия модального окна при клике вне окна(на боди) ?
У меня модальное окно вообще даже не открывается при нажатии на кнопку,потому что у меня так...

Сделать модуль авторизации-регистрации-восстановления пароля в виде модального окна
Решил сделать модуль авторизации-регистрации-восстановления пароля в виде модального окна с...

12
Dolphin
811 / 794 / 201
Регистрация: 21.09.2012
Сообщений: 2,646
15.10.2012, 12:03 2
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function () {
                            
    $('<div id="ContentDialog"><h2 id="ContentDialogTitle"></h2><div id="ContentDialogContent"><img src="i/ajax-loader.gif" /></div><a href="#" id="hlContentDialogClose">Close</a></div>').appendTo('body');
    $('<div id="ModalOverlay"></div>').appendTo('body');
 
    $(".contentDialog").click(function (e) {
        $("#ContentDialog #ContentDialogContent").load($(this).attr("href"));
        $("#ContentDialog #ContentDialogTitle").text($(this).attr("title"));
        $("#ContentDialog").fadeIn('slow');
        $("#ModalOverlay").fadeIn('slow');
        $("body").scrollTop(0);
        e.preventDefault();
    });
 
    $("#hlContentDialogClose").click(function (e) {
        $("#ContentDialog").fadeOut('slow');
        $("#ModalOverlay").fadeOut('slow');
        e.preventDefault();
    });
});
1
Братуха
5 / 5 / 5
Регистрация: 15.07.2012
Сообщений: 773
15.10.2012, 12:56  [ТС] 3
Какой есть, такой есть Dolphin, У меня вопрос - вот у меня окно открывается на уровне ссылки которую я открываю, это настраивается в jQuery или при помощи таблицы стилей. Просто я в таблице пытался выравнять окно но получилось очень коряво.
0
Dolphin
811 / 794 / 201
Регистрация: 21.09.2012
Сообщений: 2,646
15.10.2012, 12:59 4
Цитата Сообщение от Братуха Посмотреть сообщение
окно открывается на уровне ссылки которую я открываю, это настраивается в jQuery или при помощи таблицы стилей
Скорее всего в таблице. Абсолютное позиционирование относительно родительского блока.
1
15.10.2012, 12:59
Братуха
5 / 5 / 5
Регистрация: 15.07.2012
Сообщений: 773
15.10.2012, 13:30  [ТС] 5
Цитата Сообщение от Dolphin Посмотреть сообщение
Скорее всего в таблице. Абсолютное позиционирование относительно родительского блока.
Да это так в стиле блока я прописываю position: absolute; что бы прокручивать само окно, а не то что под ним я сделал вот так
CSS
1
.modal-open { overflow: hidden;  }
. хотел поставить в стиле блока position: fixed;, но после этого модальное окно стало затеняться темным фоном, который затемнял раньше весь фон за окном.
0
Dolphin
811 / 794 / 201
Регистрация: 21.09.2012
Сообщений: 2,646
15.10.2012, 13:39 6
Цитата Сообщение от Братуха Посмотреть сообщение
Просто я в таблице пытался выравнять окно но получилось очень коряво.
Как ты его хочешь выравнять? Кидай стили для всего окна, посмотрим подумаем
1
Братуха
5 / 5 / 5
Регистрация: 15.07.2012
Сообщений: 773
15.10.2012, 14:05  [ТС] 7
Вот
CSS
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
/*  стиль формы модального окна */
    #form{
        margin:1em 0;
        padding-top:10px;
        background:url(../images/form/form_top.gif) no-repeat 0 0;
        }
    #form fieldset{
        margin:0;
        padding:0;
        border:none;    
        float:left;
        display:inline;
        width:260px;
        margin-left:25px;
        }       
        
    #form p{margin:.5em 0;} 
    #form label{display:block;} 
    #form input, #form textarea{        
        width:252px;
        border:1px solid #ddd;
        -moz-border-radius:.3em;
        -webkit-border-radius:.3em;
        border-radius:.3em;     
        background:#fff url(../images/form/form_input.gif) repeat-x;
        padding:3px;
        }       
    #form textarea{
        height:125px;
        overflow:auto;
        }                   
    #form p.submit{
        clear:both;
        background:url(../images/form/form_bottom.gif) no-repeat 0 100%;
        padding:0 25px 20px 25px;
        margin:0;
        text-align:right;
        }   
    #form button{
        width:150px;
        height:37px;
        line-height:37px;       
        border:none;
        background:url(../images/form/form_button.gif) no-repeat 0 0;
        color:#fff;
        cursor:pointer;
        text-align:center;
        }               
 
 
 
 
/*  фон при открытии */
 
 
#ModalOverlay  
{
    display: none; /*--по умолчанию скрыт--*/
    background: #000;
    position: fixed; left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: .40;/* Полупрозрачность элемента */
    z-index: 9999;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
*html #ModalOverlay {
    position: absolute;
}
 
/* стиль самого окна */
#ContentDialog 
{ 
margin-bottom: -50px;
    display: none; /*--по умолчанию скрыт--*/
    background: #fff;
    border: 20px solid #ddd;
    font-size: 1 em;
    position: fixed;
    top: 50%; left: 50%;
    margin-top:-350px;
    margin-left:-310px;
    padding-top:30px;
    padding-bottom:30px;
    z-index: 99999;
    /*--CSS3 CSS3 Тени для Блока--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    box-shadow: 0px 0px 20px #000;
    /*--CSS3 Закругленные углы--*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width:620px;
    height:700px;
}
 
.modal-open { overflow: hidden;}
 
 #ContentDialogContent 
{ float:left; }
собирал из нескольких модальных окон может где и напутал, сейчас проверил почему-то и .modal-open { overflow: hidden;} перестал работать сейчас буду искать.

Добавлено через 15 минут
вот это более правильное в нем работает .modal-open { overflow: hidden;}
CSS
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
#ContentDialog 
{ 
    display: none; /*--по умолчанию скрыт--*/
    background: #fff;
    border: 20px solid #ddd;
    font-size: 1 em;
    position: absolute;
    top: 50%; left: 50%;
    margin-top:-350px;
    margin-left:-310px;
    padding-top:30px;
    padding-bottom:30px;
    z-index: 99999;
    /*--CSS3 CSS3 Тени для Блока--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    box-shadow: 0px 0px 20px #000;
    /*--CSS3 Закругленные углы--*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width:620px;
    height:700px;
}
 
.modal-open { overflow: hidden;}
0
Dolphin
811 / 794 / 201
Регистрация: 21.09.2012
Сообщений: 2,646
15.10.2012, 14:24 8
Цитата Сообщение от Братуха Посмотреть сообщение
CSS
1
*html #ModalOverlay { position: absolute; }
Что то лишний кусок затесался в начале

Добавлено через 7 минут
А в чем теперь проблема то?
1
Братуха
5 / 5 / 5
Регистрация: 15.07.2012
Сообщений: 773
15.10.2012, 14:26  [ТС] 9
В общем я убрал эту строчку и попробовал заменить absolute на fixed ничего не вышло перестает работать .modal-open { overflow: hidden;}, а на счет
CSS
1
*html #ModalOverlay { position: absolute; }
если мне память не изменяет это стиль для IE и то, наверное, для IE6.
0
Dolphin
811 / 794 / 201
Регистрация: 21.09.2012
Сообщений: 2,646
15.10.2012, 14:38 10
Цитата Сообщение от Братуха Посмотреть сообщение
если мне память не изменяет это стиль для IE и то, наверное, для IE6.
может быть, для ие6 я не верстаю. ИМХО, пора уже и про 7 забыть, но у каждого свое мнение
1
Братуха
5 / 5 / 5
Регистрация: 15.07.2012
Сообщений: 773
15.10.2012, 14:52  [ТС] 11
Цитата Сообщение от Dolphin Посмотреть сообщение
может быть, для ие6 я не верстаю. ИМХО, пора уже и про 7 забыть, но у каждого свое мнение
Я бы IE вообще уничтожил, но люди им пользуются потому-что он установлен на каждой винде, я не верстаю на 6, просто это было в самом стиле модального окна изначально. Недавно смотрел статистику по браузерам(в общем она у разных источниках разная ), но у мненя сложилось такое впечатление, что IE сильно сдает свои позиции Ну так есть идеи насчет решения неработающего .modal-open { overflow: hidden;}при position: fixed; или лучше искать новый скрипт всплывающего окна
0
Dolphin
811 / 794 / 201
Регистрация: 21.09.2012
Сообщений: 2,646
15.10.2012, 15:05 12
Цитата Сообщение от Братуха Посмотреть сообщение
Ну так есть идеи насчет решения неработающего .modal-open { overflow: hidden;}при position: fixed;
Не вижу где используется этот блок и его цель
1
Братуха
5 / 5 / 5
Регистрация: 15.07.2012
Сообщений: 773
15.10.2012, 15:15  [ТС] 13
Вот тут
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
3 Тени для Блока--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    box-shadow: 0px 0px 20px #000;
    /*--CSS3 Закругленные углы--*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width:620px;
    height:700px;
}
 
.modal-open { overflow: hidden;}
.modal-open { overflow: hidden;} я вообще нашел в интернете так что не знаю, вроде как работает когда
CSS
1
2
3
#ContentDialog 
{ 
    position: absolute;}
ну а когда хочу сделать фиксировано, не работает .modal-open { overflow: hidden;}
0
15.10.2012, 15:15
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.10.2012, 15:15

Как сделать плавную анимацию height?
Привет. Создал страницу с верхним меню навигации. При прокрутке контента меню фиксируется и...

Как сделать плавную прокрутку на JS без jQuery?
Ни как не могу догнать... Распишите всё пожалуйста по поподробней К примеру вот менюшка: &lt;nav...

Как увеличить размер модального окна?
Здравствуйте! Подскажите как увеличить размер модального окна? &lt;script type='text/javascript'...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru