Je suis nouveau en HTML et CSS et j'essaye de créer une popup sous le bouton de ce tutoriel - [Comment - Popup] [1].
J'ai essayé de changer la position, l'affichage et d'autres attributs mais cela n'a pas fonctionné.

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");
}
-1
Vadim 20 nov. 2018 à 11:41

3 réponses

Meilleure réponse

Tout ce que vous avez actuellement fonctionne correctement, mais si vous ne rendez que le bouton et la fenêtre contextuelle sans styles supplémentaires, vous constaterez que la fenêtre contextuelle positionnée absolue s'affiche hors écran (car elle est positionnée de manière absolue) .J'ai ajouté quelques styles de corps pour afficher la fenêtre contextuelle au centre de l'écran.

J'ai également mal interprété votre question et j'ai pensé que vous vouliez que la fenêtre contextuelle s'affiche en bas de sorte qu'elle soit légèrement différente de votre exemple, mais le principe est toujours le même.

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>
0
Aaron McGuire 20 nov. 2018 à 08:54

Voilà, au lieu d'utiliser bottom:125%, utilisez les valeurs pixel

N'oubliez pas non plus l'info-bulle position et son border-width

MODIFIER : a ajusté la hauteur de la fenêtre contextuelle pour une bonne vue

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>
1
Viira 20 nov. 2018 à 08:54

J'ai un peu changé votre CSS. Voir la ligne avec / * changé * / .

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>
0
Alex Min 20 nov. 2018 à 09:20