подскажите что не так делаю с модальными окнами?
Есть такой код, увеличиваю кол - во выводимых div после чего при нажатии на любую из кнопок открывается не то окно которое должно вызываться а все!, после чего все становится как надо! если обновить страницу то опять также
я пока только учусь!
<script type="text/javascript">
$(document).ready(function() {
$('.open-window').click(function() {
$('.modal-window').fadeIn(function() {
$('.window-container').addClass('visible');
});
});
$('.close, .modal-window').click(function() {
$('.modal-window').fadeOut().end().find('.window-container').removeClass('visible');
});
$('.window-container').click(function(event) {
event.stopPropagation()
});
$('.open-window_a').click(function() {
$('.modal-window_a').fadeIn(function() {
$('.window-container').addClass('visible');
});
});
$('.close, .modal-window_a').click(function() {
$('.modal-window_a').fadeOut().end().find('.window-container').removeClass('visible');
});
$('.window-container').click(function(event) {
event.stopPropagation()
});
$('.open-window_c').click(function() {
$('.modal-window_c').fadeIn(function() {
$('.window-container').addClass('visible');
});
});
$('.close, .modal-window_c').click(function() {
$('.modal-window_c').fadeOut().end().find('.window-container').removeClass('visible');
});
$('.window-container').click(function(event) {
event.stopPropagation()
});
$('.open-window_cla').click(function() {
$('.modal-window_cla').fadeIn(function() {
$('.window-container').addClass('visible');
});
});
$('.close, .modal-window_cla').click(function() {
$('.modal-window_cla').fadeOut().end().find('.window-container').removeClass('visible');
});
$('.window-container').click(function(event) {
event.stopPropagation()
});
});
</script>
|
cinema4d,
зачем вешать одину и туже функцию несколько раз ... html код покажите |
html весь код наверно не надо вот кусок
весь код наверно не надо вот кусок
<div id="modal-window" class="modal-window">
<div class="window-container animation">
<div style="float:left; padding:5px;"><img src="img/wh.jpg"/></div>
<div style="float:left; padding:5px;"><img src="img/lg.jpg"/></div>
<div style="float:left; padding:5px;"><img src="img/gl.jpg"/></div>
<div style="float:left; padding:5px;"><img src="img/wh.jpg"/></div>
<a href="#" class="close"><img src="img/right.png" /></a>
</div>
</div>
<div id="modal-window" class="modal-window_a">
<div class="window-container animation">
<div style="float:left; padding:5px;"><img src="img/a.png"/>
<p style="color:#333333">A 45 AMG</p>
</div>
<a href="#" class="close"><img src="img/right.png" /></a>
</div>
</div>
<div style="width:auto; margin:0 auto">
<div class = "topdiv">
<a class = "amg" href="#" target="_blank"><img src="img/amgcenter.png"/></a>
<div id = "general-class">
<p class = "button_cl"><a class="open-window_a" href="#"> A </a></p>
<p class = "button_cl"><a class="open-window_c" href="#"> C </a></p>
<p class = "button_cl"><a class="open-window_cla" href="#"> CLA </a></p>
<p class = "button_cl"><a class="open-window_e" href="#"> E </a></p>
<p class = "button_cl"><a class="open-window_g" href="#"> G </a></p>
<p class = "button_cl"><a class="open-window_gl" href="#"> GL </a></p>
<p class = "button_cl"><a class="open-window_gla" href="#"> GLA </a></p>
<p class = "button_cl"><a class="open-window_ml" href="#"> ML </a></p>
<p class = "button_cl"><a class="open-window_s" href="#"> S </a></p>
<p class = "button_cl"><a class="open-window_sl" href="#"> SL </a></p>
<p class = "button_cl"><a class="open-window_slk" href="#"> SLK </a></p>
<p class = "button_cl"><a class="open-window_gt" href="#"> GT </a></p>
</div>
|
то есть думал сделать кучу окон A C E и тд.
|
cinema4d,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.orange {
background: #FFCC00;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var s = $("#general-class a"), d = $('.close');
s.click(function(event) {
event.stopPropagation();
$('.'+this.className.replace('open','modal')).addClass("orange");
});
d.click(function(event) {
event.stopPropagation();
$(this).parents('[class^="modal-window"]').removeClass("orange");
});
});
</script>
</head>
<body>
<div id="modal-window" class="modal-window">
<div class="window-container animation">
<div style="float:left; padding:5px;"><img src="img/wh.jpg"/></div>
<div style="float:left; padding:5px;"><img src="img/lg.jpg"/></div>
<div style="float:left; padding:5px;"><img src="img/gl.jpg"/></div>
<div style="float:left; padding:5px;"><img src="img/wh.jpg"/></div>
<a href="#" class="close"><img src="img/right.png" /></a>
</div>
</div>
<div id="modal-window" class="modal-window_a">
<div class="window-container animation">
<div style="float:left; padding:5px;"><img src="img/a.png"/>
<p style="color:#333333">A 45 AMG</p>
</div>
<a href="#" class="close">close<img src="img/right.png" /></a>
</div>
</div>
<div id = "general-class">
<p class = "button_cl"><a class="open-window_a" href="#">open A </a></p>
<p class = "button_cl"><a class="open-window_c" href="#"> C </a></p>
<p class = "button_cl"><a class="open-window_cla" href="#"> CLA </a></p>
<p class = "button_cl"><a class="open-window_e" href="#"> E </a></p>
<p class = "button_cl"><a class="open-window_g" href="#"> G </a></p>
<p class = "button_cl"><a class="open-window_gl" href="#"> GL </a></p>
<p class = "button_cl"><a class="open-window_gla" href="#"> GLA </a></p>
<p class = "button_cl"><a class="open-window_ml" href="#"> ML </a></p>
<p class = "button_cl"><a class="open-window_s" href="#"> S </a></p>
<p class = "button_cl"><a class="open-window_sl" href="#"> SL </a></p>
<p class = "button_cl"><a class="open-window_slk" href="#"> SLK </a></p>
<p class = "button_cl"><a class="open-window_gt" href="#"> GT </a></p>
</div>
</body>
</html>
|
рони, а опишите плз не втыкаю до конца как это происходит, то есть мне надо для каждого дива делать код ведь тут var s = $("#general-class a") ??
|
cinema4d,
данный код должен работать для любой пары a class="open-window -> div class="modal-window незачем его больше повторять на всякий случай id это уникально == неповторимо на странице |
#general-class a
Цитата:
|
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 00:47. |