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

@Братуха · Регистрация: 15.07.2012

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

Привет всем. У меня есть скрипт модального окна, но я столкнулся с проблемой задержки его, ну что бы оно открывалось плавно. У меня есть вот такой скрипт

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>

как не пытался сделать ничего не вышло помогите пожалуйста. Зарание большое спасибо

@Dolphin · 15.10.2012, 12:03

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();
    });
});

@Братуха · 15.10.2012, 12:56 **[ТС]**

Какой есть, такой есть

Dolphin, У меня вопрос - вот у меня окно открывается на уровне ссылки которую я открываю, это настраивается в jQuery или при помощи таблицы стилей. Просто я в таблице пытался выравнять окно но получилось очень коряво.

@Dolphin · 15.10.2012, 12:59

Сообщение от Братуха

окно открывается на уровне ссылки которую я открываю, это настраивается в jQuery или при помощи таблицы стилей

Скорее всего в таблице. Абсолютное позиционирование относительно родительского блока.

@Братуха · 15.10.2012, 13:30 **[ТС]**

Сообщение от Dolphin

Скорее всего в таблице. Абсолютное позиционирование относительно родительского блока.

Да это так в стиле блока я прописываю position: absolute; что бы прокручивать само окно, а не то что под ним я сделал вот так

CSS
1
.modal-open { overflow: hidden;  }

. хотел поставить в стиле блока position: fixed;, но после этого модальное окно стало затеняться темным фоном, который затемнял раньше весь фон за окном.

@Dolphin · 15.10.2012, 13:39

Сообщение от Братуха

Просто я в таблице пытался выравнять окно но получилось очень коряво.

Как ты его хочешь выравнять? Кидай стили для всего окна, посмотрим подумаем

@Братуха · 15.10.2012, 14:05 **[ТС]**

Вот

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;}

@Dolphin · 15.10.2012, 14:24

Сообщение от Братуха

CSS
1
*html #ModalOverlay { position: absolute; }

Что то лишний кусок затесался в начале

Добавлено через 7 минут
А в чем теперь проблема то?

@Братуха · 15.10.2012, 14:26 **[ТС]**

В общем я убрал эту строчку и попробовал заменить absolute на fixed ничего не вышло перестает работать .modal-open { overflow: hidden;}, а на счет

CSS
1
*html #ModalOverlay { position: absolute; }

если мне память не изменяет это стиль для IE и то, наверное, для IE6.

@Dolphin · 15.10.2012, 14:38

Сообщение от Братуха

если мне память не изменяет это стиль для IE и то, наверное, для IE6.

может быть, для ие6 я не верстаю. ИМХО, пора уже и про 7 забыть, но у каждого свое мнение

@Братуха · 15.10.2012, 14:52 **[ТС]**

Сообщение от Dolphin

может быть, для ие6 я не верстаю. ИМХО, пора уже и про 7 забыть, но у каждого свое мнение

Я бы IE вообще уничтожил, но люди им пользуются потому-что он установлен на каждой винде, я не верстаю на 6, просто это было в самом стиле модального окна изначально. Недавно смотрел статистику по браузерам(в общем она у разных источниках разная

), но у мненя сложилось такое впечатление, что IE сильно сдает свои позиции

Ну так есть идеи насчет решения неработающего .modal-open { overflow: hidden;}при position: fixed; или лучше искать новый скрипт всплывающего окна

@Dolphin · 15.10.2012, 15:05

Сообщение от Братуха

Ну так есть идеи насчет решения неработающего .modal-open { overflow: hidden;}при position: fixed;

Не вижу где используется этот блок и его цель

@Братуха · 15.10.2012, 15:15 **[ТС]**

Вот тут

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;}

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114

@Братуха 5 / 5 / 5 Регистрация: 15.07.2012 Сообщений: 773
	15.10.2012, 12:56 [ТС]
	Какой есть, такой есть Dolphin, У меня вопрос - вот у меня окно открывается на уровне ссылки которую я открываю, это настраивается в jQuery или при помощи таблицы стилей. Просто я в таблице пытался выравнять окно но получилось очень коряво. 0