Форум

plywoods · #1 (**permalink**) 04.03.2014, 10:10

Доброго времени суток.

На данной странице, справа в сайд-баре есть голубая прямоугольная картинка синего цвета с надписью "Which product is right for me?" При клике на нее, вылетает небольшое окно, в котором пользователь может выбрать из списка что ему необходимо сделать, а "окно" ему предложит подходящие продукты. Все это в данном случае реализовано на сильверлайте. Как сделать такое окно на JS? Нужен ли тут jquery? Как вообще средствами js создать такое окно? Спасибо.

PS. В js особо не силен, так, ковыряю потихоньку, так что...чем детальнее будут ответы тем лучше )) Заранее большое спасибо.

danik.js · #2 (**permalink**) 04.03.2014, 11:00

Да там больше CSS, нежели js.

Сообщение от plywoods

Нужен ли тут jquery?

jQuery - это библиотека с набором полезных функций, в основном для работы с DOM - манипуляция, анимация css-свойств и тд.
Необходимость ее использования каждый определяет сам.
Учитывая удобство и популярность, а также наличие большого числа т.н. "плагинов" jQuery - использование этой либы оправдано.

plywoods · #3 (**permalink**) 04.03.2014, 11:24

Почему больше необходим CSS ?
Как средствами CSS создать такое окно 700х700рх? Да и к тому же, должна быть где-то прописана логика, какую картинку показывать в зависимости от того или другого набора выбранных чекбоксов...я думал, что это реализуемо через switch-case ...или как-то еще программно. Так же, в окне присутствует анимация и зум логотипов, так же, прячутся и показваются кнопки покупки и скачки - а это вроде тоже делается через js?
Поэтому для начала...Как вообще создать такое окно 700*700, которое бы выскакивало при клике на ссылку ? Я так понимаю, что это может быть отдельный хтмл...но как ему сказать, чтобы оно открывалось без стандартной браузерной рамки...и таких размеров ?

danik.js · #4 (**permalink**) 04.03.2014, 12:30

Вот тебе простейший пример:

<!DOCTYPE html>
<meta charset="utf-8" />
<style>
    .modal{
        position: fixed;
        width: 700px;
        max-width: 100%;
        max-height: 100%;
        height: 700px;
        margin: auto;
        overflow: auto;
        background: #fefefe;
        border-radius: 10px;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
        padding: 10px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
</style>
<script>
    function Modal() {
        this.element = document.createElement('div');
        this.element.className = 'modal';
    }
    Modal.prototype.show = function() {
        document.body.appendChild(this.element);
    }
    Modal.prototype.hide = function() {
        document.body.removeChild(this.element);
    }
    Modal.prototype.setContent = function(html) {
        this.element.innerHTML = html;
    }
</script>
<body>
    <script>
        var modal = new Modal();
        modal.setContent('<h4>Это модальное окно</h4>');
    </script>
    <button onclick="modal.show()">Открыть окно</button>
</body>

Есть готовые реализации, со всякими плюшками. Самая популярная - fancybox (зависит от jQuery). Есть и без зависимостей.

Форум

Справочник

Discord чат

Курсы javascript