0

html-код

<div class="popup">
    <div class="popup__bg"></div>
    <div class="form">
        <form class='popupform'>
            <input type="text" placeholder="Ваше имя"  required>
            <input type="text" placeholder="Ваш номер телефона"  required>
            <textarea placeholder='Описание' required></textarea>
            <input type="submit" calue="Отправить">
        </form>
        <div class="popup__close">x</div>
    </div>
</div>

css-код:

.popup {
    position: absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
    display:none;
}

.popup__bg {
    background:rgba(0,0,0,0.6);
    position:absolute;
    z-index:1;
    height:100%;
    width:100%;
}

.form {
    position: relative;
    margin:10% auto;
    z-index:2;
    width: 30%;
    padding: 2%;
    background: rgb(94, 70, 96);
    background: rgba(101, 70, 96, 0.8);

    border:1px solid rgb(94, 70, 96);
    border-radius:20px;
    box-shadow:0 0 2px rgba(0,0,0,0.5);
}

.popupform {
    text-align: center;
}

.popupform input, .popupform textarea{
    padding: 1% 2%;
    width: 85%;

    display: inline-block;
    margin-top: 1em;
    outline: none;
    border-radius: 10px;

    font-size: 1.25rem;
}

.popupform input[type='submit'] {
    width: 50%;
    transition: all 0.1s linear 0.2s;
    border: none;
}

.popupform input[type='submit']:hover {
    background: green;
    color: #ffffff;
}

.popup__close {
    width: 5%;

    position: absolute;
    top: 3%;
    right: 2%;
    border: 2px solid #000;
    border-radius: 20px;
    text-align: center;
    vertical-align: middle;
    background: rgb(137, 0, 152);
    background: rgba (137, 0, 152, 0.7);
    cursor: pointer;
    transition: all 0.1s linear 0.1s;


    color: white;
    font-size: 1.25rem;
}

.popup__close:hover {
    background: red;
    color: #000;
    border: 2px solid #fff;
}

js-код:

 $(document).ready(function() { 

    $(".popup__bg").click(function(){    
        $(".popup").fadeOut(800); 
    });

    $(".popup__close").click(function(){ 
        $(".popup").fadeOut(800);
    });

});

function showPopup() {
    $(".popup").fadeIn(800);
}

В html-коде есть несколько кнопок с вызовом попап окна (в начале и в середине страницы), выпадание окна задано позиционированием.
Подскажите можно ли как-то подвязать окно к кнопке которая его вызывает (чтобы окно появлялось рядом с кнопкой, а не по координатам позиционирования) ?
Можно ли чтобы при клике на определенную кнопку, менялся текст плейсхолдеров формы?

4
  • Можно получить координаты кнопки var coordinates = $('#button').offset() и устаноавить их попапу $('.popup').offset(coordinates). 5 мая 2016 в 7:42
  • Так это будет выглядеть ? $(document).ready(function() { var coordinates = $('#button').offset(); $(".popup__bg").click(function(){ $(".popup").fadeOut(800); }); $(".popup__close").click(function(){ $(".popup").fadeOut(800); }); }); function showPopup() { $('.popup').offset(coordinates) $(".popup").fadeIn(800); }
    – SvArt713
    5 мая 2016 в 7:50
  • Да, можно так. Можно перед этим ещё какие-нибудь манипуляции с координатами выполнить, чтобы попап относительно кнопки красивее располагался. Можно для универсальности привязывать его не конкретной кнопке, а к той, которая была кликнута. Если нужно. 5 мая 2016 в 8:00
  • Вот мне именно это и нужно (привязать к кнопке которая была кликнута). Этот код почему-то не работает, могли бы Вы глянуть и исправить как нужно ?
    – SvArt713
    5 мая 2016 в 8:05

1 ответ 1

0

var popup = $('.popup');

$('.button').click(function(e) {
    var coordinates = $(this).offset(); //Получаем координаты кликнутой кнопки
    coordinates.top += $(this).height() / 2; // На высоте середины кнопки
    coordinates.left += $(this).width() + 15; //Отодвигаем от кнопки на 15 пикселей
    popup.offset(coordinates); //Устанавливаем координаты попапу
    popup.fadeIn(800);
});
.popup {
  display: none;
  width: 100px;
  height: 100px;
  background-color: gray;
  z-index: 999;
}

p {
  margin-bottom: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="popup"></div>

<div id="demo">
  <p>
    <button class="button">Click me!</button>
  </p>

  <p>
    <a href="#" class="button">Click me too!</a>
  </p>
</div>

3
  • Все работает, но как при этом сделать, чтобы бекграунд попапа был на весь экран (затемнял всю площадь), а попап был по середине, просто чуть ниже кнопки ?
    – SvArt713
    5 мая 2016 в 8:36
  • Сделать на странице полупрозрачный overlay div, невидимый по умолчанию, а перед показом попапа вызывать $('#overlay') .show(); 5 мая 2016 в 8:40
  • С фоном по другому решил, но ест еще но, почему-то когда нажимаю несколько раз, окно все опускается и опускается, походу дела не возвращается высота назад, может есть решение этого ? Постоянно увеличивает отступ с верху на одно и тоже число.
    – SvArt713
    5 мая 2016 в 8:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.