Форум Сайтостроение Веб-строительство

Всплывающее окно на jquery

J
На сайте с 06.07.2011
Offline
160
jano
613

Помогите пожалуйста с кодом.

Если в html вставить несколько ссылок:

<a href="#" id="url">Открыть окно</a>

<a href="#" id="url">Открыть окно</a>

<a href="#" id="url">Открыть окно</a>

то, открываться будет только самая первая ссылка, другие - работать не будут. Что нужно подправить в коде? url2,url3 - не вариант. Нужно что бы по одному коду всё работало.

Взял его отсюда: http://wemarus.ru/jquery/204-vsplyvayushhee-okno-na-jquery.html 


<html>

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<style>

#shadow { 

background: black;

height: 100%;

opacity: 0.8;

position: fixed;

width: 100%;

z-index: 50;

display:none;

top:0;

left:0;

}



#window{

position:fixed;

left:50%;

top:50%;

width:800px;

height:500px;

margin-left:-400px;

margin-top:-250px;

border:1px solid black;

display:none;

background:white;

z-index:99;

box-shadow: 0px 0px 10px #000000;

}



#close{ 

background: url("closebox.png") 50% 50% no-repeat transparent;

border: medium none currentColor;

height: 30px;

position: absolute;

right: -15px;

top: -15px;

width: 30px;

}

</style>

<script type="text/javascript">

$(document).ready(function(){



$('#close').click(function() {

$('#shadow').hide();

$('#window').hide();

});



$('#url').click(function() {

$('#shadow').show();

$('#window').slideToggle(500);

});



}) 

</script>

</head>

<body>

<div id="shadow"></div>

<div id="window">

<div id="close"></div>

</div>

<a href="#" id="url">Открыть окно</a>

</body>

</html>
Polkan
На сайте с 28.09.2005
Offline
102
Polkan
#1

http://htmlbook.ru/html/attr/id

WordPress-плагин для Apishops (http://p-api-shop.ru/) P-API-Shop WooCommerce-плагин для Apishops (http://woo-apishops.ru/) Woo-Apishops
J
На сайте с 06.07.2011
Offline
160
jano
#2
Polkan:
http://htmlbook.ru/html/attr/id

Ясно, спасибо. Может кто знает варианты решения, имеется ввиду другой скрипт.

danil-html
На сайте с 02.12.2012
Offline
22
danil-html
#3

id замените на class и привязывайтесь к классам)

HTML верстка, Wordpress. Парсинг сайтов. (http://danil-html.ru)
J
На сайте с 06.07.2011
Offline
160
jano
#4
danil-html:
id замените на class и привязывайтесь к классам)

Как это заменить в данном скрипте?

Joker-jar
На сайте с 26.08.2010
Offline
154
Joker-jar
#5

id="url" заменить на class="url", $('#url') заменить на $('.url')

J
На сайте с 06.07.2011
Offline
160
jano
#6
Joker-jar:
id="url" заменить на class="url", $('#url') заменить на $('.url')

Большое спасибо, попробую.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий