如何使弹出 div 在点击时隐藏/显示

Question

I want to make a button to change and make div pop-up after clicked and after being again clicked hide div and came back to normal. How do I do that? (also if you can keep it HTML and css because I am learning Java and not so familiar and good with it but if it is only way you know with Java no problem) . I tried it with a Focus in css but after I click any were in a screen button just came back to normal.

If you know this please answer it would be very big help.

 .viewgames { color: black; background-color: white; border: none; border-radius: 2px; font-family: 'Press Start 2P', cursive; font-size: 15px; position: absolute; z-index: 1; letter-spacing: 1px; word-spacing: -5px; width: 150px; height: 60px; margin-left: 45%; margin-top: 400px; cursor: pointer; opacity: 1; transition: 0.75 s; } .gamesvp { margin-top: 0px; } .viewgames: hover.gamesvp { margin-top: 0px; } .viewgames: hover { background-color: rgba(0, 0, 0, 0); border: 4px white solid; color: white; transform: scale(1.2); } .hidegames { opacity: 0; margin-bottom: 15px; } .viewgames: focus { color: black; background-color: white; border: none; border-radius: 2px; font-family: 'Press Start 2P', cursive; font-size: 15px; position: absolute; z-index: 1; letter-spacing: 1px; word-spacing: -5px; width: 150px; height: 60px; margin-left: 45%; margin-top: 400px; cursor: pointer; opacity: 1; transition: 0.75s; } .viewgames: focus.gamesvp { opacity: 0; } .viewgames: focus.hidegames { opacity: 1; }

 <button class="viewgames"><p class="gamesvp">View Games</p>

This is what I have so far!

Answer 1

What i had understand so far by your question this is what you want

It uses JS

 // When the user clicks on div, open the popup function myFunction() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); $(".popup").toggleClass('active'); }

 /* 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; } .popup.active{ color: red; } /* Add animation (fade in the popup) */ @-webkit-keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } @keyframes fadeIn { from {opacity: 0;} to {opacity:1 ;} }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2>Popup</h2> <div class="popup" onclick="myFunction()">Click me to toggle the popup! <div class="popuptext" id="myPopup">A Simple Popup!</div> </div>