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

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>
Ответить с цитированием