Создание всплывающего окна
Доброго времени суток.
На данной странице, справа в сайд-баре есть голубая прямоугольная картинка синего цвета с надписью "Which product is right for me?" При клике на нее, вылетает небольшое окно, в котором пользователь может выбрать из списка что ему необходимо сделать, а "окно" ему предложит подходящие продукты. Все это в данном случае реализовано на сильверлайте. Как сделать такое окно на JS? Нужен ли тут jquery? Как вообще средствами js создать такое окно? Спасибо. PS. В js особо не силен, так, ковыряю потихоньку, так что...чем детальнее будут ответы тем лучше )) Заранее большое спасибо. |
Да там больше CSS, нежели js.
Цитата:
Необходимость ее использования каждый определяет сам. Учитывая удобство и популярность, а также наличие большого числа т.н. "плагинов" jQuery - использование этой либы оправдано. |
Почему больше необходим CSS ?
Как средствами CSS создать такое окно 700х700рх? Да и к тому же, должна быть где-то прописана логика, какую картинку показывать в зависимости от того или другого набора выбранных чекбоксов...я думал, что это реализуемо через switch-case ...или как-то еще программно. Так же, в окне присутствует анимация и зум логотипов, так же, прячутся и показваются кнопки покупки и скачки - а это вроде тоже делается через js? Поэтому для начала...Как вообще создать такое окно 700*700, которое бы выскакивало при клике на ссылку ? Я так понимаю, что это может быть отдельный хтмл...но как ему сказать, чтобы оно открывалось без стандартной браузерной рамки...и таких размеров ? |
Вот тебе простейший пример:
<!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). Есть и без зависимостей. |
| Часовой пояс GMT +3, время: 14:09. |