[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: Elvin7, Cr@ze  
Всплывающее окно при нажатии на кнопку
MOHAPXДата: Суббота, 07.11.2009, 08:49 | Сообщение # 1
Группа: Пользователи
Сообщений: 463
Награды: 0
Репутация: 1238
Статус:
Code
<body bgColor=#ffffff link="#008000">    



    
<CENTER>    
<BUTTON onClick="popup1.style.visibility='visible';makeActive(popup1)">КЛАЦ 1</BUTTON>    
<BUTTON onClick="popup2.style.visibility='visible';makeActive(popup2)">КЛАЦ 2</BUTTON>    
</center>    
<DIV ID=popup1    
STYLE="position:absolute;    
     visibility:hidden;    
     left:190;top:90;    
     width:312px;height:180;    
     border:2px threedhighlight outset;    
     background-color:#ffcb00;    
     font-family:MS Sans Serif;font-size:8pt;    
     cursor:default"    
onSelectStart="return false"    
onMouseDown="makeActive(this)">    
<DIV    
STYLE="position:absolute;    
     left:0;top:0;    
     width:100%;height:100%;    
     border:1px inactiveborder solid">    
</DIV>    
<DIV    
STYLE="position:absolute;    
     left:2;top:2;    
     width:304px;height:18px;    
     background-color:inactivecaption;    
     color:inactivecaptiontext;    
     font-family:MS Sans Serif;    
     font-size:9pt;font-weight:bold;    
     padding:2px"    
onMouseDown="grabEl(this.offsetParent)">    
    Привет! Пользователь FORUCOZ.COM    
</DIV>    
<DIV    
STYLE="position:absolute;    
     left:2;top:21;    
     width:304px;height:18px;    
     background-color:#ffe06b;    
     color:menutext;    
     font-family:MS Sans Serif;font-size:8pt;"><SPAN ID="span1"    
STYLE="height:18px;width:40px;padding-top:2"    
onMouseDown="setMenu(this)"> Menu1 </SPAN><SPAN ID="span2"    
STYLE="height:18px;width:40px;padding-top:2"    
onMouseDown="setMenu(this)"> Menu2 </SPAN><SPAN ID="span3"    
STYLE="height:18px;width:40px;padding-top:2"    
onMouseDown="setMenu(this)"> Menu3 </SPAN></DIV>    
<HR STYLE="position:relative;top:40;width:100%">    

<DIV ID=menu2 STYLE="position:absolute; visibility:hidden; top:39;left:0; width:100px; border:2px threedhighlight outset; background-color:menu; font-family:MS Sans Serif;font-size:8pt; color:menutext; line-height:160%; z-index:10;">    
<SPAN STYLE="width:100%;padding-left:10px" onMouseOver="this.style.backgroundColor='highlight';this.style.color='highlighttext'" onMouseOut="this.style.backgroundColor='menu';this.style.color='menutext'" onMouseDown="maches()">Link 1</SPAN><BR>    
<SPAN STYLE="width:100%;padding-left:10px" onMouseOver="this.style.backgroundColor='highlight';this.style.color='highlighttext'" onMouseOut="this.style.backgroundColor='menu';this.style.color='menutext'" onMouseDown="maches()">Link 2</SPAN><BR>    
</DIV>    
<DIV ID=menu3 STYLE="position:absolute; visibility:hidden; top:39;left:0; width:100px; border:2px threedhighlight outset; background-color:menu; font-family:MS Sans Serif;font-size:8pt; color:menutext; line-height:160%; z-index:10;">    
<SPAN STYLE="width:100%;padding-left:10px" onMouseOver="this.style.backgroundColor='highlight';this.style.color='highlighttext'" onMouseOut="this.style.backgroundColor='menu';this.style.color='menutext'" onMouseDown="maches()">Link 1</SPAN><BR>    
<SPAN STYLE="width:100%;padding-left:10px" onMouseOver="this.style.backgroundColor='highlight';this.style.color='highlighttext'" onMouseOut="this.style.backgroundColor='menu';this.style.color='menutext'" onMouseDown="maches()">Link 2</SPAN><BR>    
<SPAN STYLE="width:100%;padding-left:10px" onMouseOver="this.style.backgroundColor='highlight';this.style.color='highlighttext'" onMouseOut="this.style.backgroundColor='menu';this.style.color='menutext'" onMouseDown="maches()">Link 3</SPAN><BR>    
<SPAN STYLE="width:100%;padding-left:10px" onMouseOver="this.style.backgroundColor='highlight';this.style.color='highlighttext'" onMouseOut="this.style.backgroundColor='menu';this.style.color='menutext'" onMouseDown="maches()">Link 4</SPAN><BR>    
</DIV>    
<DIV STYLE="position:absolute; left:3;top:53; color:windowtext">    
Ваш текст.    
</DIV>    
<CENTER>    
<BUTTON    
STYLE="position:absolute;    
     top:145;width:70px"    
     onClick="popup1.style.visibility='hidden'">    
OK</BUTTON></CENTER>    
</DIV>    

<DIV ID=popup2    
STYLE="position:absolute;    
     visibility:hidden;    
     left:500;top:90;    
     width:212px;height:80;    
     border:2px threedhighlight outset;    
     background-color:threedface;    
     font-family:MS Sans Serif;font-size:8pt;    
     cursor:default"    
onSelectStart="return false"    
onMouseDown="makeActive(this)">    
<DIV    
STYLE="position:absolute;    
     left:0;top:0;    
     width:100%;height:100%;    
     border:1px inactiveborder solid">    
</DIV>    
<DIV    
STYLE="position:absolute;    
     left:2;top:2;    
     width:204px;height:18px;    
     background-color:inactivecaption;    
     color:inactivecaptiontext;    
     font-family:MS Sans Serif;    
     font-size:9pt;font-weight:bold;    
     padding:2px"    
onMouseDown="grabEl(this.offsetParent)">    
    DHTML Popup 2    
</DIV>    
<DIV      
STYLE="position:absolute;    
     left:3;top:23;    
     color:windowtext">    
Ваш текст.    
</DIV>    
<CENTER><BUTTON    
STYLE="position:relative;    
     top:45;width:70px"    
     onClick="popup2.style.visibility='hidden'">    
OK</BUTTON></CENTER>    
</DIV>    

<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">    
<!--    
activeElement = null;    

function makeActive(el){    
     if (activeElement) {    
     activeElement.children(0).style.borderColor = "inactiveborder";    
     activeElement.children(1).style.backgroundColor = "inactivecaption";    
     activeElement.children(1).style.color = "inactivecaptiontext";    
     }    
     el.style.zIndex = (activeElement) ? (activeElement.style.zIndex+1) : 1;    
     el.children(0).style.borderColor = "activeborder";    
     el.children(1).style.backgroundColor = "activecaption";    
     el.children(1).style.color = "captiontext";    
     activeElement = el;    
}    
          
makeActive(popup1);    

activeMenu = null;    

function setMenu(el){    
     makeActive(el.offsetParent.offsetParent);    
     if (activeMenu) {    
     activeMenu.menuElement.style.visibility = "hidden";    
     activeMenu.style.backgroundColor = "menu";    
     activeMenu.style.color = "menutext";    
     }    
     el.style.backgroundColor = "highlight";    
     el.style.color = "highlighttext";    
     switch (el.id) {    
     case "span1":    
     el.menuElement = menu1;    
     break;    
     case "span2":    
     el.menuElement = menu2;    
     break;    
     case "span3":    
     el.menuElement = menu3;    
     break;    
     }    
     el.menuElement.style.pixelLeft = el.offsetLeft+2;    
     el.menuElement.style.visibility = "visible"    
     activeMenu = el;    
     document.onmousedown = killMenu;    
     event.cancelBubble = true;      
}    

function killMenu(){    
     activeMenu.menuElement.style.visibility = "hidden";    
     activeMenu.style.backgroundColor = "menu";    
     activeMenu.style.color = "menutext";    
     activeMenu = null;    
     document.onmousedown = null;    
}    

function xPress(el,on) {    
     el.style.borderStyle = (on) ? "inset" : "outset";    
     event.cancelBubble = true;    
}    

currentX = currentY = null;    
whichEl = null;    

function grabEl(el) {    
     if (activeMenu) killMenu();    
     whichEl = el;    
     makeActive(whichEl);    
     event.cancelBubble = true;    
     whichEl.style.pixelLeft = whichEl.offsetLeft;    
     whichEl.style.pixelTop = whichEl.offsetTop;    
     currentX = (event.clientX + document.body.scrollLeft);    
     currentY = (event.clientY + document.body.scrollTop);      
     document.onmousemove = moveEl;    
     document.onmouseup = dropEl;    
     event.returnValue = false;      
}    
          
function moveEl() {    
     newX = (event.clientX + document.body.scrollLeft);    
     newY = (event.clientY + document.body.scrollTop);    
     distanceX = (newX - currentX);    
     distanceY = (newY - currentY);    
     currentX = newX;    
     currentY = newY;    
     whichEl.style.pixelLeft += distanceX;    
     whichEl.style.pixelTop += distanceY;    
     event.returnValue = false;    
}    
          
function dropEl() {    
     document.onmousemove = document.onmouseup = null;    
}    
function maches()    
{    
alert('Link.');    
}    
//-->    
</SCRIPT>

Пример - http://besterz.co.cc/index1.html

 
Cr@zeДата: Пятница, 25.12.2009, 10:06 | Сообщение # 2
Группа: Пользователи
Сообщений: 233
Награды: 0
Репутация: 30
Статус:
Спасибо
 
  • Страница 1 из 1
  • 1
Поиск:



Copyright MyCorp © 2026-2010
|