Под кнопкой

Я новичок в HTML и CSS и пытаюсь создать всплывающее окно под кнопкой из этого руководства - [How TO - Popup] [1] .
Я попытался изменить положение, отображение и другие атрибуты, но это не сработало.

CSS

.popup {
    position: relative;
    display: inline;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
    .popup .popuptext {
        visibility: hidden;
        width: 160px;
        height: 160px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 8px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -80px;
    }

    .popup .popuptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .popup .show {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
    }

HTML

<button class = "popup" onclick = "popupShow()"> Calendar
    <span class = "popuptext" id = "myPopup">A Simple Popup!</span>
</button>

JavaScript

const popupShow = () => {
    const popup = document.querySelector("#myPopup");
    popup.classList.toggle("show");
}

z-index: 1; попробуйте изменить значение на 10000 и посмотрите, работает ли

— 20.11.2018 09:42

javascript html css popup

20.11.2018 09:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Итак, вместо использования bottom:125% используйте значения pixel

Также не забывайте о всплывающей подсказке position и ее border-width.

РЕДАКТИРОВАТЬ: отрегулирована высота всплывающего окна для хорошего обзора

const popupShow = () => {
        const popup = document.querySelector("#myPopup");
        popup.classList.toggle("show");
    }

.popup {
        position: relative;
        display: inline;
        left:50%;
        margin-top:35px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
        .popup .popuptext {
            visibility: hidden;
            width: 160px;
            height: 60px;
            background-color: #555;
            color: #fff;
            display:inline-block;
            text-align: center;
            border-radius: 6px;
            padding: 8px 0;
            position: absolute;
            z-index: 1;
            /*bottom: 125%;*/
            left: 0px;
            /*margin-left: -80px;*/
            bottom: -85px;
        }
    
        .popup .popuptext::after {
            content: "";
            position: absolute;
            top: -5px;
            left: 50%;
            margin-left: -5px;
            border-width: 0 5px 5px 5px;
            border-style: solid;
            border-color: #555 transparent;
        }
    
        .popup .show {
            visibility: visible;
            -webkit-animation: fadeIn 1s;
            animation: fadeIn 1s;
        }

<button class = "popup" onclick = "popupShow()"> Calendar
        <span class = "popuptext" id = "myPopup">A Simple Popup!</span>
    </button>

20.11.2018 09:54

Ответ принят как подходящий

Все, что у вас есть в настоящее время, работает правильно, но если вы только визуализируете кнопку и всплывающее окно без каких-либо дополнительных стилей, вы обнаружите, что всплывающее окно с абсолютным позиционированием отображается за пределами экрана (потому что оно позиционируется абсолютным). Я добавил несколько стилей тела, чтобы отображать всплывающее окно в центре экрана.

Я также неверно истолковал ваш вопрос и подумал, что вы хотите, чтобы всплывающее окно показывалось внизу, поэтому оно немного отличается от вашего примера, но принцип все тот же.

const popupShow = () => {
    const popup = document.querySelector("#myPopup");
    popup.classList.toggle("show");
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100vh;
}
.popup {
    position: relative;
    display: inline;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
    .popup .popuptext {
        visibility: hidden;
        width: 160px;
        height: 160px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 8px 0;
        position: absolute;
        z-index: 1;
        top:calc(100% + 8px);
        left: 50%;
        margin-left: -80px;
    }

    .popup .popuptext::after {
        content: "";
        position: absolute;
        top: -10px;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #555   transparent ;
    }

    .popup .show {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
    }

<button class = "popup" onclick = "popupShow()"> Calendar
    <span class = "popuptext" id = "myPopup">A Simple Popup!</span>
</button>

20.11.2018 09:54

Я немного изменил ваш CSS. Смотрите строку с /*измененный*/.

const popupShow = () => {
  const popup = document.querySelector("#myPopup");
  popup.classList.toggle("show");
}

.popup {
  position: relative;
  display: inline;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 50px; /*add*/
}

.popup .popuptext {
  visibility: hidden;
  width: 160px;
  height: auto; /*changed*/
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: -40px; /*changed*/
  left: 50%;
  margin-left: -80px;
}

.popup .popuptext::after {
  content: "";
  position: absolute;
  top: -32%; /*changed*/
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent; /*changed*/
}

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

<button class = "popup" onclick = "popupShow()"> Calendar
    <span class = "popuptext" id = "myPopup">A Simple Popup!</span>
 </button>

20.11.2018 10:12

Другие вопросы по теме

Использование Bootstrap 4 для размещения нижнего колонтитула под всем остальным содержимым

Использовать таблицу HTML для рисования jsoup

Как равномерно разложить выпадающий список?

Javascript ImagePreview

Панель навигации не выстраивается должным образом

Есть ли способ отключить декодирование Unicode BeautifulSoup?

Увеличить ширину и высоту ячеек td в html

Переключатель jQuery не работает с функцией next ()

Попытка вывести значение переключателей в список таблиц

Многоуровневый складной / аккордеон, работающий бесконечно, не нарушая содержимого таблицы

Под кнопкой

Ответы 3

Другие вопросы по теме

Похожие вопросы