Помогите с модальным окном

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем etens1212, 20 сен 2013.

  1. etens1212

    etens1212

    Регистрация:
    1 май 2013
    Сообщения:
    320
    Симпатии:
    16
    Я НАПИСАЛ МОДАЛЬНОЕ ОКНО
    НА 2 КАРТИНКИ
    И НЕ ЗНАЮ КАК СДЕЛАТЬ ЧТО Б ОТКРЫТОЕ ОКНО БЫЛО ОТДЕЛЬНО ПРИВЯЗАНО К КАЖДОЙ КАРТИНКЕ

    HTML:
    <div id="comanda">
    
    
    <img id="popup__toggle" src="http://business-start.ru/wp-content/uploads/2013/09/фото7.jpg" width="200px" height="300px">
    <div class="popup__overlay">
        <div class="popup">
            <a href="#" class="popup__close">X</a>
        <div class="header">
            Андрей Гук
        </div>
        <div class="con">
            <ul>
                <li>Специалист в области маркетинга и PR </li>
                <li>Эксперт и автор колонки в журнале для предпринимателей Rush Journal</li>
                <li>Член Совета Директоров Junior Chamber International. PRдиректор JCI СанктПетербург</li>
                <li>Автор 3х курсов (языки: русский и английский): “Нетворкинг, Или искусство налаживать связи”, “Social Media Marketing”, “Стань человекомбрендом”</li>
                <li>Тренер и лектор мероприятий и форумов локального, городского, областного,всероссийского и международного уровней. Самая большая аудитория
    представители 93 стран.</li>
            </ul>
        </div>
        </div>
    </div>
    
    
    
    <img id="popup__toggle" src="http://business-start.ru/wp-content/uploads/2013/09/фото7.jpg" width="200px" height="300px">
    <div class="popup__overlay">
        <div class="popup">
            <a href="#" class="popup__close">X</a>
        <div class="header">
            Андрей Гук2
        </div>
        <div class="con">
            <ul>
                <li>Специалист в области маркетинга и PR </li>
                <li>Эксперт и автор колонки в журнале для предпринимателей Rush Journal</li>
                <li>Член Совета Директоров Junior Chamber International. PRдиректор JCI СанктПетербург</li>
                <li>Автор 3х курсов (языки: русский и английский): “Нетворкинг, Или искусство налаживать связи”, “Social Media Marketing”, “Стань человекомбрендом”</li>
                <li>Тренер и лектор мероприятий и форумов локального, городского, областного,всероссийского и международного уровней. Самая большая аудитория
    представители 93 стран.</li>
            </ul>
        </div>
        </div>
    </div>
    
    <div class="cl"></div>
     
  2. TopRaN

    TopRaN

    Регистрация:
    17 сен 2013
    Сообщения:
    15
    Симпатии:
    2
  3. Svental

    Svental

    Регистрация:
    22 ноя 2012
    Сообщения:
    62
    Симпатии:
    30
    Немного непонятен вопрос... попробуй объяснить ещё раз что ты хочешь...
    так же рекомендую использовать бутстрап или arcticmodal
     
  4. etens1212

    etens1212

    Регистрация:
    1 май 2013
    Сообщения:
    320
    Симпатии:
    16
    ну смотрите
    у меня привязан к первой фотографии
    а мн нужно что б каждое модальное окно было отдельно
    и привязано отдельно
    --- Добавлено, 21 сен 2013 ---
    а воn js
    PHP:
        <script type="text/javascript">
            
    = $('.popup__overlay')
    $(
    '#popup__toggle').click(function() {
        
    p.css('display''block')
    })
    p.click(function(event) {
        
    event || window.event
        
    if (e.target == this) {
            $(
    p).css('display''none')
        }
    })
    $(
    '.popup__close').click(function() {
        
    p.css('display''none')
    })
        </
    script>

    а вот сss

    Код:
    .popup__overlay {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.7);
        text-align: center
        }
     
    .popup__overlay:after {
            display: inline-block;
            height: 100%;
            width: 0;
            vertical-align: middle;
            content: ''
        }
    
    
    .popup {
        display: inline-block;
        position: relative;
        width: 700px;
        border-radius: 15px 0px 15px 0px;
        background: #fff;
        vertical-align: middle;
    }
    
    
    .popup .header {
        height: 40px;
        color: #fff;
        padding-top: 15px;
        text-align: center;
        font-size: 20px;
    }
    
    .popup .con {
        padding: 25px;
        text-align: left;
        margin-left: 10px;
    }
       
    }
    
    
    .popup li {
        display: list-item;
    text-align: -webkit-match-parent;
      }
    
    
    .popup-form__row {
        margin: 1em 0
        }
    label {
        display: inline-block;
        width: 120px;
        text-align: left
        }
    input[type="text"], input[type="password"] {
        margin: 0;
        padding: 2px 2px 2px 10px;
        border: 1px solid#AAA;
        width:400px;
        height:35px;
    }
    
    
    .email {
        margin: 0;
        padding: 2px 2px 2px 10px;
        border: 1px solid#AAA;
        width:400px;
        height:35px;
    }
    
    input[type="button"] {
        padding: 6px 16px;
        border: 0;
        border-radius: 2px;
        -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,.3);
        box-shadow:        inset 0 1px 1px rgba(255,255,255,.3);
        cursor: pointer;
        background: #444;
        background: -webkit-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
        background:    -moz-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
        background:    -ms-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
        background:      -o-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
        background:        linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
        color: #fff
        }
    .popup__close {
        display: block;
        position: absolute;
        top: -20px;
        right: 10px;
        width: 12px;
        height: 12px;
        padding: 8px;
        border: 5px solid #fff;
        border-radius: 50%;
        -webkit-box-shadow: inset 0 2px 2px 2px rgba(0,0,0,.4),
                                  0 3px 3px    rgba(0,0,0,.4);
        box-shadow:        inset 0 2px 2px 2px rgba(0,0,0,.4),
                                  0 3px 3px    rgba(0,0,0,.4);
        cursor: pointer;
        background: #fff;
        text-align: center;
        font-size: 12px;
        line-height: 12px;
        color: #444;
        text-decoration: none;
        font-weight: bold
        }
        .popup__close:hover {
            background: #ddd
            }
    
     
    Последнее редактирование: 21 сен 2013
  5. etens1212

    etens1212

    Регистрация:
    1 май 2013
    Сообщения:
    320
    Симпатии:
    16
  6. TopRaN

    TopRaN

    Регистрация:
    17 сен 2013
    Сообщения:
    15
    Симпатии:
    2
    Если я все правильно понял, то нужно что бы каждая картинка была модально? тогда может использовать лайтбокс (галерея)
    лучше если вы подробно напишите конкретную задачу (подробно)
    Если нужен отдельные действия и был разные модальные окна то вот ссылка http://www.rudebox.org.ua/simple-modal-window-with-jquery-rudebox/
     
  7. etens1212

    etens1212

    Регистрация:
    1 май 2013
    Сообщения:
    320
    Симпатии:
    16
    вот есть у меня 4 кнопки
    и к ним надо модальное окно прикрепить
    каждое отдельно
    ВОТ
    http://jsbin.com/eKilOnO/1/edit
    мне сказали что б они не сливались надо прописывать _js1
    я прописал
    http://business-start.ru/наша-компания/
    вот только js не знаю как настроить, что б работало

    PHP:
    <script type="text/javascript">
    = $('.popup__overlay')
    $(
    '#popup__toggle').click(function() {
        
    p.css('display''block')
    })
    p.click(function(event) {
        
    event || window.event
        
    if (e.target == this) {
            $(
    p).css('display''none')
        }
    })
    $(
    '.popup__close').click(function() {
        
    p.css('display''none')
    })
        </
    script>

    я не хочу ставить другое
    у меня все готово только с подключениям плохо
     
  8. TopRaN

    TopRaN

    Регистрация:
    17 сен 2013
    Сообщения:
    15
    Симпатии:
    2
    если правильно понимаю #popup__toggle это див?
    попробуй дублировать функцию скрипта с изменением дива
    например #popup__toggle1 #popup__toggle2 и т.д.
    т.е.
    <script type="text/javascript">
    p = $('.popup__overlay')
    $('#popup__toggle1').click(function() {
    p.css('display', 'block')
    })
    p.click(function(event) {
    e = event || window.event
    if (e.target == this) {
    $(p).css('display', 'none')
    }
    })
    $('.popup__close').click(function() {
    p.css('display', 'none')
    })
    </script>
    в итоге 4 скрипта. только не забуть в стилях указать этот класс