Плагин jquery выпадения дива

для решения данной задачи вам потребуется однопиксельный gif, z-index, opacity и 10 строк js кода.

 

http://habrahabr.ru/blogs/jquery/45834/

 

вот простая реализация поставленной задачи

HTML:

1. <script type="text/javascript">
2. function show() {
3. document.getElementById('back').style.display='block';
4. document.getElementById('myalert').style.display='block';
5. document.getElementById('myalert').innerHTML='myalert <a onClick="hide()">close</a><br>'+document.getElementById('text').value;
6. }
7. function hide() {
8. document.getElementById('back').style.display='none';
9. document.getElementById('myalert').style.display='none';
10. }
11. </script>
12.  
13. <style type="text/css">
14. #myalert
15. {
16. position:absolute;
17. top:100px;
18. left:100px;
19. width:200px;
20. height:150px;
21. z-index:2;
22. background-color:white;
23. display:none;
24. }
25. #back
26. {
27. position:absolute;
28. top:0px;
29. left:0px;
30. width:100%;
31. height:100%;
32. z-index:1;
33. background-color:black;
34. display:none;
35. opacity:0.8;
36. cursor:wait;
37. }
38. </style>
39.  
40. <div id=myalert></div>
41. <div id=back></div>
42. <input type=text id=text>
43. <input type=button value=show onClick="show()">
44.  

в IE вместо opacity:0.8; надо filter: alpha(opacity=80);

 

так не, ТС нужно что бы он именно "выплывал" снизу.
В этих примерах он просто появляется.

 

Знаю такой плагин, но только для DoJo. Посмотри, может на толкнет на мысли:

http://dojocampus.org/explorer/#Dijit_Dialog_Tooltip

 

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

 

сча накалякаю ))

 

HTML:

1. <script type="text/javascript">
2.  
3. function show() {
4. document.getElementById('myalert').style.display='block';
5. document.getElementById('back').style.display='block';
6. document.getElementById('myalert').innerHTML='myalert <a onClick="hide()">close</a><br>'+document.getElementById('text').value;
7. pxT=setInterval(move, pxMs);
8. opT=setInterval(shadow, opMs);
9. }
10.  
11. function move() {
12. px=px/pxSteps;
13. pxNow=px+pxNeed;
14. document.getElementById('myalert').style.top=pxNow;
15. if(pxNow<pxNeed+1) {
16. stopMove();
17. }
18. }
19.  
20. function shadow() {
21. i++;
22. document.getElementById('back').style.opacity=opByStep*i;
23. if(i==opSteps) {
24. stopShadow();
25. }
26. }
27.  
28. function stopMove() {
29. clearInterval(pxT);
30. }
31.  
32. function stopShadow() {
33. clearInterval(opT);
34. }
35.  
36.  
37.  
38. function hide() {
39. px=screen.height;
40. document.getElementById('myalert').style.top=px;
41. document.getElementById('myalert').style.display='none';
42. document.getElementById('back').style.display='none';
43. document.getElementById('back').style.opacity=0;
44. i=0;
45. }
46. </script>
47.  
48. <style type="text/css">
49. #myalert
50. {
51. position:fixed;
52. left:100px;
53. width:200px;
54. height:150px;
55. z-index:2;
56. background-color:white;
57. display:none;
58. }
59. #back
60. {
61. position:fixed;
62. top:0px;
63. left:0px;
64. width:100%;
65. height:100%;
66. z-index:1;
67. background-color:black;
68. display:none;
69. cursor:wait;
70. }
71. </style>
72.  
73. <div id=myalert></div>
74. <div id=back></div>
75. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
76. <input type=text id=text>
77. <input type=button value=show onClick="show()">
78.  
79. <script type="text/javascript">
80. i=0;
81. opMs=10;
82. opSteps=50;
83. opNeed=0.8;
84. opByStep=opNeed/opSteps;
85. pxMs=10;
86. pxSteps=1.1;
87. pxNeed=100;
88. px=screen.height;
89. document.getElementById('myalert').style.top=px;
90. </script>

 

opMs устанавливает интервал в милисекундах
opNeed устанавливает необходимый конечный уровень прозрачности
opSteps устанавливает плавность затемнения

pxMs устанавливает интервал в милисекундах
pxNeed устанавливает необходимое положение div-а в пикселях относительно верхнего края
pxSteps устанавливает плавность "всплывания" div-а

 

vital ©

 

vital
спасибо, ты сэкономил мое время. :wink:

 

Koc, няма за шо ))

я проверял на мозиле
если не трудно проверте на других браузерах

 

IE8: сначала выскакивает панелька, что в целях безопасности была заблокирована часть скриптов. Разрешаю их выполнение, работает некорректно.

Safari 3: все ок

 

на досуге поставлю и поправлю

 

ндаа.. соврал я маленька ))

 

стоп, вроде заработало в IE8.

 

Ты исправил IE8? или javascript-код?

 

ваше право

напомню что представленный выше мною код является

ps
всё гениальное просто :wink: