Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.11.2014, 13:34
Аспирант
Отправить личное сообщение для cinema4d Посмотреть профиль Найти все сообщения от cinema4d
 
Регистрация: 07.08.2013
Сообщений: 41

подскажите что не так делаю с модальными окнами?
Есть такой код, увеличиваю кол - во выводимых 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>
Ответить с цитированием
  #2 (permalink)  
Старый 13.11.2014, 14:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

cinema4d,
зачем вешать одину и туже функцию несколько раз ...
html код покажите
Ответить с цитированием
  #3 (permalink)  
Старый 13.11.2014, 15:11
Аспирант
Отправить личное сообщение для cinema4d Посмотреть профиль Найти все сообщения от cinema4d
 
Регистрация: 07.08.2013
Сообщений: 41

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>
Ответить с цитированием
  #4 (permalink)  
Старый 13.11.2014, 15:43
Аспирант
Отправить личное сообщение для cinema4d Посмотреть профиль Найти все сообщения от cinema4d
 
Регистрация: 07.08.2013
Сообщений: 41

то есть думал сделать кучу окон A C E и тд.
Ответить с цитированием
  #5 (permalink)  
Старый 13.11.2014, 15:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

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>
Ответить с цитированием
  #6 (permalink)  
Старый 13.11.2014, 15:58
Аспирант
Отправить личное сообщение для cinema4d Посмотреть профиль Найти все сообщения от cinema4d
 
Регистрация: 07.08.2013
Сообщений: 41

рони, а опишите плз не втыкаю до конца как это происходит, то есть мне надо для каждого дива делать код ведь тут var s = $("#general-class a") ??
Ответить с цитированием
  #7 (permalink)  
Старый 13.11.2014, 16:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

cinema4d,
данный код должен работать для любой пары a class="open-window -> div class="modal-window незачем его больше повторять
на всякий случай id это уникально == неповторимо на странице
Ответить с цитированием
  #8 (permalink)  
Старый 16.11.2014, 20:53
Аспирант
Отправить личное сообщение для cinema4d Посмотреть профиль Найти все сообщения от cinema4d
 
Регистрация: 07.08.2013
Сообщений: 41

#general-class a
Сообщение от рони Посмотреть сообщение
cinema4d,
данный код должен работать для любой пары a class="open-window -> div class="modal-window незачем его больше повторять
на всякий случай id это уникально == неповторимо на странице
не пойму почему тут id #general-class a?? а в html их нет??
Ответить с цитированием
  #9 (permalink)  
Старый 17.11.2014, 01:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от cinema4d
не пойму почему тут id #general-class a?? а в html их нет??


Сообщение от рони
<div id = "general-class">58 59 <p class = "button_cl"><a class="open-window_a" href="#">open A </a></p>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Мотоциклисты есть? l-liava-l Оффтопик 13 04.07.2014 13:35
Несколько событий в onclick. Что не так делаю. Blackmore1991 Общие вопросы Javascript 2 21.04.2014 10:27
Не пойму, что я делаю не так (TypeError: '20' is not a function (evaluating...) adelante jQuery 2 02.06.2012 22:29
Объясните мне что я делаю не так. Yanub Общие вопросы Javascript 10 24.08.2009 13:04
Подскажите что я не так сделал Sheport-NET Events/DOM/Window 3 27.04.2009 11:00