Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Несколько одинаковых скриптов на одной странице (https://javascript.ru/forum/project/60649-neskolko-odinakovykh-skriptov-na-odnojj-stranice.html)

jenya_yaroshenko 12.01.2016 19:29
Несколько одинаковых скриптов на одной странице
 
Всем привет, я самоучка и пытаюсь прописать скрипт всплывающего окна для внутреннего сайта компании, получилось мне нравится только но, мне нужно в районе 20 записей на одной странице, как сделать я не знаю мучаюсь целый день, одна запись работает нормально вставляю 2 показывает на двух только первую. Всем спасибо! 
<p>
	<style type="text/css">
#divWin {position:absolute; width:600px; height:250px; border:3px solid brown; background:white; visibility:hidden; padding:20px; text-align:left;}
#closetButton {position:absolute; top:0; right:0; border-bottom:6px solid brown; border-left:6px solid brown; font-weight:bold; cursor:pointer; padding:6px 8px}	</style>
	<script type="text/javascript">
function winOpen(){
var obj=document.getElementById("divWin").style;
obj.visibility="visible";
winOpen2(3, 0, obj);
 };
 
function winOpen2(s, o, obj){//показываем окно
o+=s;
if(o<100){
obj.opacity=o/100;
obj.filter='alpha(opacity='+o+')';
setTimeout(function(){winOpen2(s, o, obj);}, 55);}
else{//показать полностью
obj.opacity=1;
obj.filter='alpha(opacity=100)';};
 };
 
function winCloset(){
winCloset2(5, 100, document.getElementById("divWin").style);
 };
 
function winCloset2(s, o, obj){//скрываем окно
o-=s;
if(o>0){
obj.opacity=o/100;
obj.filter='alpha(opacity='+o+')';
setTimeout(function(){winCloset2(s, o, obj);}, 55);}
else{//обнуляем на выходе
obj.opacity=0;
obj.filter='alpha(opacity=0)';
obj.visibility="hidden";};
 };
</script></p>


<p><input onclick="winOpen();" type="button" value=" Провідний фахівець | Ярошенко Євгеній олегович " /></p>
<p>&nbsp;</p>
<div id="divWin">
	<div id="closetButton" onclick="winCloset();">
		Х</div>
	<table border="0" cellpadding="0" cellspacing="0">
		<tbody>
			<tr>
				<td style="width:219px;">
					<p><b>Телефон зовнішній</b></p>
				</td>
				<td style="width:219px;">
					<p>481-32-10</p>
				</td>
				<td rowspan="4" style="width:219px;">
					<div>
						<img src="http://noc.mon.gov.ua/files/tel_dovidnuk/foto/Yaroshenko.jpg" /></div>
				</td>
			</tr>
			<tr>
				<td style="width:219px;">
					<p><b>Телефон внутрішній</b></p>
				</td>
				<td style="width:219px;">
					<p>79-55</p>
				</td>
			</tr>
			<tr>
				<td style="width:219px;">
					<p><b>e-mail</b></p>
				</td>
				<td style="width:219px;">
					<p>yaroshenko@mon.gov.ua</p>
				</td>
			</tr>
			<tr>
				<td style="width:219px;">
					<p><b>Кабінет</b></p>
				</td>
				<td style="width:219px;">
					<p>28</p>
				</td>
			</tr>
			<tr>
				<td style="width:219px;">
					<p><b>Адреса</b></p>
				</td>
				<td style="width:219px;">
					<p>пр. Перемоги, 10</p>
				</td>
			</tr>
		</tbody>
	</table>
</div>

рони 12.01.2016 21:38
jenya_yaroshenko,
поискать по форуму "открывашка"
http://javascript.ru/forum/dom-windo...tml#post385057
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<p>
	<style type="text/css">
.divWin {position: relative; width:600px; height:250px; border:3px solid brown; background:white;  display:none; padding:20px; text-align:left; margin-bottom: 40px}
.closetButton {position:absolute; top:0; right:0; border-bottom:6px solid brown; border-left:6px solid brown; font-weight:bold; cursor:pointer; padding:6px 8px}	</style>
	<script type="text/javascript">
function winOpen(id){
var obj=document.getElementById(id).style;
obj.display="block";
winOpen2(3, 0, obj);
 };

function winOpen2(s, o, obj){//показываем окно
o+=s;
if(o<100){
obj.opacity=o/100;
obj.filter='alpha(opacity='+o+')';
setTimeout(function(){winOpen2(s, o, obj);}, 55);}
else{//показать полностью
obj.opacity=1;
obj.filter='alpha(opacity=100)';};
 };

function winCloset(id){
winCloset2(5, 100, document.getElementById(id).style);
 };

function winCloset2(s, o, obj){//скрываем окно
o-=s;
if(o>0){
obj.opacity=o/100;
obj.filter='alpha(opacity='+o+')';
setTimeout(function(){winCloset2(s, o, obj);}, 55);}
else{//обнуляем на выходе
obj.opacity=0;
obj.filter='alpha(opacity=0)';
obj.display="none";};
 };
</script></p>

<p><input onclick="winOpen('div1');" type="button" value=" Провідний фахівець | Ярошенко Євгеній олегович " /></p>
<p>&nbsp;</p>
<div id="div1" class="divWin">
	<div class="closetButton" onclick="winCloset('div1');">
		Х</div>
	<table border="0" cellpadding="0" cellspacing="0">
		<tbody>
			<tr>
				<td style="width:219px;">
					<p><b>Телефон зовнішній</b></p>
				</td>
				<td style="width:219px;">
					<p>481-32-10</p>
				</td>
				<td rowspan="4" style="width:219px;">
					<div>
						<img src="http://noc.mon.gov.ua/files/tel_dovidnuk/foto/Yaroshenko.jpg" /></div>
				</td>
			</tr>
			<tr>
				<td style="width:219px;">
					<p><b>Телефон внутрішній</b></p>
				</td>
				<td style="width:219px;">
					<p>79-55</p>
				</td>
			</tr>
			<tr>
				<td style="width:219px;">
					<p><b>e-mail</b></p>
				</td>
				<td style="width:219px;">
					<p>yaroshenko@mon.gov.ua</p>
				</td>
			</tr>
			<tr>
				<td style="width:219px;">
					<p><b>Кабінет</b></p>
				</td>
				<td style="width:219px;">
					<p>28</p>
				</td>
			</tr>
			<tr>
				<td style="width:219px;">
					<p><b>Адреса</b></p>
				</td>
				<td style="width:219px;">
					<p>пр. Перемоги, 10</p>
				</td>
			</tr>
		</tbody>
	</table>
</div>
<p><input onclick="winOpen('div2');" type="button" value=" Провідний фахівець | Ярошенко Євгеній олегович " /></p>
<p>&nbsp;</p>
<div id="div2" class="divWin">
	<div class="closetButton" onclick="winCloset('div2');">
		Х</div>
	<table border="0" cellpadding="0" cellspacing="0">
		<tbody>
			<tr>
				<td style="width:219px;">
					<p><b>Телефон зовнішній</b></p>
				</td>
				<td style="width:219px;">
					<p>481-32-10</p>
				</td>
				<td rowspan="4" style="width:219px;">
					<div>
						<img src="http://noc.mon.gov.ua/files/tel_dovidnuk/foto/Yaroshenko.jpg" /></div>
				</td>
			</tr>
			<tr>
				<td style="width:219px;">
					<p><b>Телефон внутрішній</b></p>
				</td>
				<td style="width:219px;">
					<p>79-55</p>
				</td>
			</tr>
			<tr>
				<td style="width:219px;">
					<p><b>e-mail</b></p>
				</td>
				<td style="width:219px;">
					<p>yaroshenko@mon.gov.ua</p>
				</td>
			</tr>
			<tr>
				<td style="width:219px;">
					<p><b>Кабінет</b></p>
				</td>
				<td style="width:219px;">
					<p>28</p>
				</td>
			</tr>
			<tr>
				<td style="width:219px;">
					<p><b>Адреса</b></p>
				</td>
				<td style="width:219px;">
					<p>пр. Перемоги, 10</p>
				</td>
			</tr>
		</tbody>
	</table>
</div>
</body>

</html>

jenya_yaroshenko 13.01.2016 10:12
Все работает. Большое спасибо.


Часовой пояс GMT +3, время: 10:19.