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

@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;}

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@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