Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 28.12.2015, 18:49
Интересующийся
Отправить личное сообщение для DartV Посмотреть профиль Найти все сообщения от DartV
 
Регистрация: 25.12.2015
Сообщений: 11

рони,

Огромное спасибо!

Всего на страничке 6 модалок и в каждой своя картинка:

<div class="dm-overlay" id="win1" ...
<div class="dm-overlay" id="win2" ...
<div class="dm-overlay" id="win3" ...
<div class="dm-overlay" id="win4" ...
<div class="dm-overlay" id="win5" ...
<div class="dm-overlay" id="win6" ...


Как это учесть?
Ответить с цитированием
  #12 (permalink)  
Старый 28.12.2015, 19:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

DartV,
<div class="single_image" data-src="http://sdlweb.ru/img/09-Villa.jpg"

$(function() {
    var $overlay = $(".dm-overlay"), $single = $(".single_image");
    $single.on("click", function(event) {
        event.preventDefault();
        var i = $single.index(this);
        $overlay.eq(i).show().find("img")[0].src = $(this).data('src');
        $("html,body").css({
            "overflow": "hidden"
        })
    });
    $overlay.on("click", function(event) {
        event.preventDefault();
        $overlay.hide();
        $("html,body").css({
            "overflow": "auto"
        })
    })
});
Ответить с цитированием
  #13 (permalink)  
Старый 28.12.2015, 19:11
Интересующийся
Отправить личное сообщение для DartV Посмотреть профиль Найти все сообщения от DartV
 
Регистрация: 25.12.2015
Сообщений: 11

Странно, но теперь при клике по блоку не вызывается модалка. Что-то сломалось. Всё 3 раза перепроверил и откатывал обратно.
Ответить с цитированием
  #14 (permalink)  
Старый 28.12.2015, 19:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

DartV,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <style type="text/css">
.dm-overlay {
   display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    width: 200px;
    height: 200px;

}

</style>
<script>
 $(function() {
    var $overlay = $(".dm-overlay"), $single = $(".single_image");
    $single.on("click", function(event) {
        event.preventDefault();
        var i = $single.index(this);
        $overlay.eq(i).show().find("img")[0].src = $(this).data('src');
        $("html,body").css({
            "overflow": "hidden"
        })
    });
    $overlay.on("click", function(event) {
        event.preventDefault();
        $overlay.hide();
        $("html,body").css({
            "overflow": "auto"
        })
    })
});
</script>
</head>

<body>
<div data-wow-delay="0.2s" class="grid_4 wow fadeInRight">
			        <div class="single_image" data-src="http://sdlweb.ru/img/09-Villa.jpg">
                        <img src="http://livedemo00.template-help.com/wt_55108/images/page-4_img01.jpg" alt="">
                        <div class="image_overlay">
                            <a href="">View Full Project</a>
                            <h2>drawing</h2>
                            <h4>with pencil colors</h4>
                        </div>
                    </div>
              </div>

<div class="dm-overlay">
        <div class="dm-table">
            <div class="dm-cell">
                <div class="dm-modal cyan">
                    <a href="#close" class="close"></a>
                    <h3>Модальный блок №3 абсолютно по центру.(тест)</h3>
                        <img src="http://pampinta.com/imgs/img_loader.gif">
                    <p>Окно выводится строго по центру, тест</p>
                </div>
            </div>
        </div>
</div>
<div data-wow-delay="0.2s" class="grid_4 wow fadeInRight">
			        <div class="single_image" data-src="http://sdlweb.ru/img/09-Villa.jpg">
                        <img src="http://livedemo00.template-help.com/wt_55108/images/page-4_img01.jpg" alt="">
                        <div class="image_overlay">
                            <a href="">View Full Project 2</a>
                            <h2>drawing</h2>
                            <h4>with pencil colors</h4>
                        </div>
                    </div>
              </div>

<div class="dm-overlay">
        <div class="dm-table">
            <div class="dm-cell">
                <div class="dm-modal cyan">
                    <a href="#close" class="close"></a>
                    <h3>Модальный блок №3 абсолютно по центру.(тест) 2</h3>
                        <img src="http://pampinta.com/imgs/img_loader.gif">
                    <p>Окно выводится строго по центру, тест</p>
                </div>
            </div>
        </div>
</div>
</body>

</html>
Ответить с цитированием
  #15 (permalink)  
Старый 28.12.2015, 19:55
Интересующийся
Отправить личное сообщение для DartV Посмотреть профиль Найти все сообщения от DartV
 
Регистрация: 25.12.2015
Сообщений: 11

Я понял в чем беда. В дургих блоках у меня слудующая конструкция:

<div data-wow-delay="0.4s" class="grid_4 wow fadeInRight">
<div data-wow-delay="0.2s" class="grid_4 wow fadeInLeft">


Я верно понимаю, что data-wow-delay="0.4s" как раз мешает открытию модалки? Как это поправить?
Ответить с цитированием
  #16 (permalink)  
Старый 28.12.2015, 20:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

DartV,
изучить селекторы и поправить код согласно вашему html
Ответить с цитированием
  #17 (permalink)  
Старый 28.12.2015, 20:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от DartV
Я верно понимаю, что data-wow-delay="0.4s"
это совершенно не причём
Ответить с цитированием
  #18 (permalink)  
Старый 28.12.2015, 20:27
Интересующийся
Отправить личное сообщение для DartV Посмотреть профиль Найти все сообщения от DartV
 
Регистрация: 25.12.2015
Сообщений: 11

рони,

Прошу прощения, все заработало!

Я не учел, что <div class="dm-overlay"> ... нужно скопировать 6 раз.

Возможно ли сделать всего 1 контейнер <div class="dm-overlay"> , а в нём только подменять картинку?
Ответить с цитированием
  #19 (permalink)  
Старый 28.12.2015, 20:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от DartV
Возможно ли сделать всего 1 контейнер
а подумать?
убрать .eq(i) и var i = $single.index(this);
Ответить с цитированием
  #20 (permalink)  
Старый 28.12.2015, 20:42
Интересующийся
Отправить личное сообщение для DartV Посмотреть профиль Найти все сообщения от DartV
 
Регистрация: 25.12.2015
Сообщений: 11

рони,

ещё раз спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как подгрузить js после загрузки страницы? FRIE Общие вопросы Javascript 5 15.12.2012 00:02
Убрать картинку через 10 секунд после запуска сайта douglasdenovitz Общие вопросы Javascript 9 24.09.2012 23:40
Ресайз окна в мобильном устройстве после поворота StrSprut Мобильный JavaScript 2 21.09.2012 12:32
Определение scrollTop после обновления окна cartrege Events/DOM/Window 0 31.08.2012 11:07
Обработка события после закрытия модального окна byaka Events/DOM/Window 3 11.08.2012 19:19