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

etens1212 · 20 сен 2013

Я НАПИСАЛ МОДАЛЬНОЕ ОКНО
НА 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>

TopRaN · 21 сен 2013

попробуй бутстрап http://mybootstrap.ru/javascripts/#modals

Svental · 21 сен 2013

Немного непонятен вопрос... попробуй объяснить ещё раз что ты хочешь...
так же рекомендую использовать бутстрап или arcticmodal

etens1212 · 21 сен 2013

ну смотрите
у меня привязан к первой фотографии
а мн нужно что б каждое модальное окно было отдельно
и привязано отдельно

--- Добавлено, 21 сен 2013 ---

а воn js

PHP:


    <script type="text/javascript">
        p = $('.popup__overlay')
$('#popup__toggle').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>

а вот с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
        }

etens1212 · 22 сен 2013

Вот такой код
http://jsfiddle.net/vend3tta/SE4tS/

TopRaN · 22 сен 2013

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

etens1212 · 22 сен 2013

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

PHP:

<script type="text/javascript"> p = $('.popup__overlay') $('#popup__toggle').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>

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

TopRaN · 22 сен 2013

если правильно понимаю #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 скрипта. только не забуть в стилях указать этот класс