Как сделать всплывающий блок

@adrinalist · Регистрация: 02.03.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте, помогите пожалуйста создать и интегрировать Выплывающий с верху страницы блок, высотой 200px шириной в 100%.

Подскажите что делается дальше.........?

Немного соображаю в html css
Хочу знать больше !

HTML5
1
2
3
4
5
6
7
8
9
10
<HTML>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="style.css" rel="stylesheet">
    </head>   
<body>
<div class="box">Содержание блока</div>
<h1>Кнопка -----------------------</h1>
</body>
</HTML>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.box {
    color: azure;
    background: black;
    position: relative;
    top:0px;
    width: 100%;
    height: 200;
        text-align: center;
}
 
 
h1{
    color: rgb(248, 248, 248);
    margin:0;
    position: relative;
    font-weight: lighter;
    font-size: 16px;
    line-height: 30px;
    padding: 0 19px;
    display: inline-block;
    max-width: 250px;
    background: rgb(0, 0, 0);
    border-radius:0px 0px 10px 10px;
border-style: double; 
}
}

Добавлено через 11 часов 49 минут
Хоть кто ни будь ответьте как примерно работают выплывающие окна

@AmateR62 · 04.03.2016, 16:53

Можно вот так:

HTML5
1
2
3
4
<div class="box">
  <p>Содержание блока</p>
</div>
<input type = "button" value="Показать окошко">

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.box {
  display: none;
  
  position: absolute;
  top: 10px;
  left: 50%;
  margin-left: -200px;
  
  color: azure;
  background: rgba(127, 121, 121, 0.5);
  
  width: 400px;
  height: 200px;
  text-align: center;
  
}
 
.box p {
  line-height: 200px;
}

JavaScript
1
2
3
4
5
$(function() {
  $('input').click(function(){
    $(".box").fadeIn();
  });
});

Подключаете JQuery. При клике по кнопке окошко будет показываться.
Песочница: http://codepen.io/AmateR/pen/JXYYVB

@adrinalist · 04.03.2016, 22:50 **[ТС]**

Спасибо. Отличный ответ во только блоку моему нужно не появляться С ВЕРХУ страницы как бы выезжать. если можете помогите))) А так почитаю литературу по JQuery

@AmateR62 · 04.03.2016, 22:57

Легко - делайте блок видимым ( display: none; заменить на display: block; ), сам блок прячем вверх страницы ( меняем top: 10px; на top: -200px; ). Скрипт будет такой:

JavaScript
1
2
3
4
5
$(function() {
  $('input').click(function(){
    $('.box').stop(true).animate({'top':'100px'},500);
  });
});

http://codepen.io/AmateR/pen/QNjOKe

@Danilisimo · 04.07.2019, 13:04

Добавлено через 2 минуты
Нашёл практически всю инфу, которая мне была нужна, но возник вопрос. А как сделать, что бы потом это окно можно было закрыть? Заранее спасибо!

@Mr_Sergo · 05.07.2019, 00:50

Danilisimo,

https://codepen.io/Mr_Sergo/pen/pXZKro

HTML5
1
2
3
4
5
<div class="box">
    <span id="close">X</span>
    <p>Содержание блока</p>
</div>
<input type = "button" value="Показать окошко">

JavaScript
1
2
3
4
5
6
$('input').click(function(){
    $('.box').stop(true).animate({'top':'100px'},500);
});
$('#close').click(function(){
    $('.box').stop(true).animate({'top':'-100%'},500);
});

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.box {
  display: block;
  position: absolute;
  top: -100%;
  left: 50%;
  margin-left: -200px;
  color: azure;
  background: rgba(127, 121, 121, 0.5);
  width: 400px;
  height: 200px;
  text-align: center;
}
 
.box p {
  line-height: 200px;
}
 
#close{float: right;cursor: pointer;font-size: 30px;color: red;}

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

@adrinalist 0 / 0 / 0 Регистрация: 02.03.2016 Сообщений: 6
	04.03.2016, 22:50 [ТС]
	Спасибо. Отличный ответ во только блоку моему нужно не появляться С ВЕРХУ страницы как бы выезжать. если можете помогите))) А так почитаю литературу по JQuery 0

@Danilisimo 0 / 0 / 0 Регистрация: 13.10.2018 Сообщений: 4
	04.07.2019, 13:04
	Добавлено через 2 минуты Нашёл практически всю инфу, которая мне была нужна, но возник вопрос. А как сделать, что бы потом это окно можно было закрыть? Заранее спасибо! 0