Wie erstellt man Popups in CSS/Javascript?

Ich versuche, Pop-ups enthalten Liste der Linien zu machen:Wie erstellt man Popups in CSS/Javascript?

Unterstützung
Kontakt
Demo

In der 1. Zeile, sollte es Unterstützung angezeigt werden soll. In der zweiten Zeile sollte Kontakt angezeigt werden und in der dritten Zeile sollte Demo angezeigt werden.

Ich konnte Popups mit einer Zeile erstellen, indem ich den w3schools-Link http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup verfolgte, aber ich bin mir nicht sicher, wie man Popups mit mehreren Zeilen erstellt.

Die bildliche Darstellung von dem, was ich versuche, hier gezeigt zu bekommen:

<!DOCTYPE html> <html> <style> /* Popup container - can be anything you want */ .popup { 
    position: relative; 
    display: inline-block; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; } 

/* The actual popup */ .popup .popuptext { 
    visibility: hidden; 
    width: 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 arrow */ .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; } 

/* Toggle this class - hide and show the popup */ .popup .show { 
    visibility: visible; 
    -webkit-animation: fadeIn 1s; 
    animation: fadeIn 1s; } 

/* Add animation (fade in the popup) */ @-webkit-keyframes fadeIn { 
    from {opacity: 0;} 
    to {opacity: 1;} } 

@keyframes fadeIn { 
    from {opacity: 0;} 
    to {opacity:1 ;} } </style> <body style="text-align:center"> 

<h2>Popup</h2> 

<div class="popup" onclick="myFunction()">Click me to toggle the popup! <span class="popuptext" id="myPopup">Support</span> </div> 

<script> // When the user clicks on div, open the popup function myFunction() { 
    var popup = document.getElementById('myPopup'); 
    popup.classList.toggle('show'); } </script> 

</body> </html>

Anstelle eines einfachen:

Der Code, den ich von der w3schools Link verwendet werden unten angezeigt Popup, ich habe Support geschrieben. In diesem Moment bin ich in der Lage nur eine Zeile zu erhalten, wie hier gezeigt:

Quelle

2016-10-24 Anonymous

Was haben Sie versucht? Ziemlich einfach ist das einzige, was du tust, das Umschalten zwischen einem versteckten und einem gezeigten Element. Daher müssen Sie nur zu dem Element, das Sie wechseln, hinzufügen. Ich schlage vor, eine ungeordnete Liste zu verwenden und Elemente statt einer "span" aufzulisten. –

Es gibt viele Möglichkeiten, so etwas zu tun. – Aria

als schneller Versuch machen, diese Schritte zu entwerfen, was Sie

1- offen you mentioned link

2- ändern wollen, dass die html Code:

<div class="popup" onclick="myFunction()">Click me to toggle the popup! 
<div class="popuptext" id="div"> 
    <div><span id="myPopup">Support</span><br/></div> 
    <div><span id="myPopup1">Contact</span><br/></div> 
    <div><span id="myPopup2">Demo</span><br/></div> 
</div> 
</div>

3- Änderung myFunction() Codeblock zu:

var popup = document.getElementById('div'); 
popup.classList.toggle('show');

4- Dieses css Klasse style Element in head

.popup .popuptext div{ 
    text-align: center; 
    background:#ad4747; 
    border-radius: 6px; 
    width: 160px; 
    margin-top:2px; 
}

5- Am Ende laufen und sehen das Ergebnis

aber wie Sie wissen, gibt es mehrere Möglichkeiten, Popup-Menü zu entwerfen durch front- Ende Werkzeuge,

aber meine Lösung ist eine schnelle Design-Hoffnung geben Sie etwas Hilfe.

Additional helpful link

Quelle

2016-10-24 17:02:53 Aria

Wie erstellt man Popups in CSS/Javascript?

Antwort

Verwandte Themen