单击链接时弹出添加文字

Question

MY website is currently under construction so im trying to add a little pop up on the header links that says "coming soon" or something like that. You click it and it just pops up near the link.

This is the tutorial i was following but cant get it to work with my own code. So ill take anything at this point.

https://www.w3schools.com/howto/howto_js_popup.asp

Id like something where all i have to do is add a certain class to each link and it just work once that class is added or something like that seems to me to be the best.

so idealy id like to add it to the about us, our work and services button.

<ul class="nav">
    <div class="new">
        <li><a href="/">HOME</a></li>
        <li><a href="/aboutus/">ABOUT US</a></li>                   
        <li><a href="/ourwork/">OUR WORK</a></li>
        <li><a href="/services/">SERVICES</a></li>
    </div>
</ul>

 @import url('https://fonts.googleapis.com/css?family=Roboto'); @import url('https://fonts.googleapis.com/css?family=Roboto:bold'); @import url('https://fonts.googleapis.com/css?family=Roboto:100'); @import url('https://fonts.googleapis.com/css?family=Roboto:600'); @font-face { font-family: "roboto"; src: url('https://fonts.googleapis.com/css?family=Roboto'); } html, body { margin: 0; padding: 0; height: 100%; width: 100%; top: 0; background-image: url('images/bg.png'); background-size: cover; background-position: center; background-repeat: no-repeat; background-color:#e0e0e0; } .logo { width: 150px; fill: white; display: block; position: relative; padding: 23px 0px 0px 50px; } .logo svg { position: absolute; top: 0px; right: 0px; } #hireus { position: absolute; top: 0; right: 0; padding: 3px; font-family: proxima nova; font-size: 12px; text-decoration: none; color: white; margin: 27px 50px 0px 0px; text-decoration: none; z-index: 10; } .intro { height: 100%; width: 100%; margin: auto; display: table; /* top: 0; background-image: url('images/bg.png'); background-size: cover; background-position: center; background-repeat: no-repeat; */ } .intro .inner { display: table-cell; vertical-align: middle; width: 100%; max-width: none; } /* was ul */ .nav { list-style-type: none; overflow: hidden; position: absolute; top: 0; left: 0; opacity: 0.8; display: table; margin: 0; width: 100%; text-align: center; padding: 0 } li { /* width: 120px; height: 40px; */ margin: 0px 0px; display: inline-block; padding: 0; font-family: proxima nova; font-size: 10px; text-decoration: none; } .new a { display: block; /* width: 120px; height: 40px; */ /* line-height: 40px; */ text-decoration: none; text-align: center; color: white; /* margin: 20px 20px; */ margin: 32px 20px 0px 20px; } .content { max-width: 1200px; margin: 0 auto; text-align: center; padding-bottom: 7%; } .content h1 { font-family: proxima nova; font-size: 520%; font-weight: bold; color: white; margin: 0; padding-bottom: 3px; } .content p { font-family: proxima nova; font-size: 12px; font-weight: 100; color: white; margin: 0 auto; max-width: 420px; padding-bottom: 25px; } .btn { font-family: proxima nova; font-size: 14px; font-weight: bold; color: white; text-decoration: none; border: solid 1px white; /* padding: 10px 100px; */ border-radius: 60px; transition: all 0.5s; width: 160px; display: inline-block; text-align: center; padding-top: 13px; padding-bottom: 13px; } .btn:hover { color: #b0ccff; border: solid 1px #b0ccff; } .btn2 { font-family: proxima nova; font-size: 14px; font-weight: bold; color: white; text-decoration: none; border: solid 1px #0B315C; /* padding: 10px 100px; */ border-radius: 60px; transition: all 0.5s; width: 160px; background-color: #0B315C; display: inline-block; text-align: center; padding-top: 13px; padding-bottom: 13px; margin-left: 30px; -webkit-box-shadow: 0px 0px 20px black rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 20px black rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 20px black rgba(0, 0, 0, 0.5); } .btn2:hover { color: #b0ccff; border: solid 1px #b0ccff; } #scroll { color: green; } .title { font-family: proxima nova; font-size: 50px; font-weight: 600; color: black; text-align: center; margin-top: 60px; padding-bottom: 2px; } .subtitle { font-family: proxima nova; font-size: 12px; font-weight: 200; color: #9D9D9D; text-align: center; margin-top: -45px; padding-bottom: 2px; } #second { border-bottom: 1px solid #E6E6E6; width: 480px; margin: auto; } #Layer_1 { width: 100px; height: 100px; } #group2 {} .whatwedo { text-align: center; width: 100%; margin-top: 100px; } .subject { text-align: center; width: 300px; display: inline-block; margin: 0px 50px; } .subject img{ width: 100px; } .subject h2 { font-family: proxima nova; font-size: 20px; font-weight: 600; color: black; margin-bottom: 12px; } .desc { font-family: proxima nova; font-size: 12px; font-weight: 200; color: #9D9D9D; } .group3 { position: relative; text-align: center; color: white; margin-top: 90px; } .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: proxima nova; font-size: 24px; font-weight: 100; color: white; width: 550px; } form { display: table; margin: 0 auto; } #forth { width: 100%; } #forth h2{ margin-bottom: 20px; } input[type=text], select { width: 400px; padding: 13px 20px; margin: 8px 0; display: inline-block; border-radius: 30px; box-sizing: border-box; font-family: proxima nova; font-size: 14px; } input[type=submit] { width: 160px; background-color: #4CAF50; color: white; padding: 13px 20px; margin: 8px 0; border: none; border-radius: 30px; cursor: pointer; background-color: #0B315C; font-family: proxima nova; font-size: 14px; font-weight: bold; position: relative; bottom: 42px; margin: -9px 0px 0px 240px; } .email-form { width: 400px; } .email-form input { border: 0; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); } #hi{ background-color: #F9F9F9; margin-top: -64px; padding-top: 150px; padding-bottom: 120px; } footer { background-color: #30659B; width: 100vw; } .logo2 { width: 150px; fill: white; display: block; } .nav2 { padding:0; list-style-type: none; color: white; display: flex; /*Generates a flexbox layout with default flex direction as row */ width: 100%; /* Not really required */ height:100px; align-items: center; /*Aligns contents vertically */ justify-content: space-around; margin: 0px; } li { padding:0; font-family: proxima nova; font-size: 10px; text-decoration: none; text-align:center; margin:5px; } li:first-child{ margin-left:100px; } li:last-child{ margin-right:100px; } li a { text-decoration: none; color: white; } /*--- Media Queries --*/ @media screen and (max-width: 900px) { .content { padding-bottom: 10%; } .content h1 { font-size: 400% } .btn { font-size: 110%; padding: 9px 43px; } } @media screen and (max-width: 768px) { .content { padding-bottom: 12%; } .content h1 { font-size: 300% } .btn { font-size: 100%; padding: 9px 43px; } } @media screen and (max-width: 480px) { .content { padding-bottom: 14%; } .content h1 { font-size: 300% } .btn { font-size: 100%; padding: 10px 44px; } } 

 <!DOCTYPE html> <head> <title>Launchpad | Web design and marketing</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link href="css/animate.css" rel="stylesheet"/> <link href="css/waypoints.css" rel="stylesheet"/> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"> <link rel="icon" href="images/favicon.ico" type="image/x-icon"> <script src="js/jquery.waypoints.min.js" type="text/javascript"></script> <script src="js/waypoints.js" type="text/javascript"></script> </head> <body> <div class="logo"> <svg class="logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268 50"><title>Artboard 1</title><path d="M46.26,10.5h6.46V35.17H65.55v5.69H46.26Z"/><path d="M82.8,38.59a9.1,9.1,0,0,1-7,2.82c-3.5,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87A14.42,14.42,0,0,1,79,18.33c5,0,9.6,2,9.6,8.33v14.2H82.8Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M109.15,38.08a10.29,10.29,0,0,1-7.74,3.32c-4.82,0-7.1-2.64-7.1-6.92V18.88h5.78V32.21c0,3,1.59,4.05,4.05,4.05a6.47,6.47,0,0,0,5-2.5V18.88h5.78v22h-5.78Z"/><path d="M135.5,27.57c0-3-1.59-4.1-4.05-4.1a6.26,6.26,0,0,0-5,2.59V40.86h-5.78v-22h5.78v2.87a10.07,10.07,0,0,1,7.69-3.41c4.82,0,7.15,2.73,7.15,7V40.86H135.5Z"/><path d="M157.26,18.33c4.51,0,7.24,2,8.69,4l-3.78,3.5a5.44,5.44,0,0,0-4.64-2.37c-3.5,0-6,2.55-6,6.37s2.46,6.42,6,6.42a5.55,5.55,0,0,0,4.64-2.37L166,37.4c-1.46,2-4.19,4-8.69,4-6.78,0-11.65-4.78-11.65-11.56S150.48,18.33,157.26,18.33Z"/><path d="M184.61,27.48c0-3-1.59-4-4.1-4a6.4,6.4,0,0,0-5,2.59V40.86h-5.78V10.5h5.78V21.74a10.17,10.17,0,0,1,7.74-3.41c4.82,0,7.15,2.64,7.15,6.92V40.86h-5.78Z"/><path d="M196.12,49.24V18.88h5.78v2.78a8.49,8.49,0,0,1,6.78-3.32c5.64,0,9.74,4.19,9.74,11.52s-4.1,11.56-9.74,11.56A8.4,8.4,0,0,1,201.9,38v11.2Zm10.74-25.76a6.47,6.47,0,0,0-5,2.5v7.78a6.62,6.62,0,0,0,5,2.5c3.32,0,5.55-2.59,5.55-6.42S210.19,23.47,206.86,23.47Z"/><path d="M235.94,38.59a9.1,9.1,0,0,1-7,2.82c-3.51,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87a14.42,14.42,0,0,1,9.6-3.46c5,0,9.6,2,9.6,8.33v14.2h-5.78Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M262.57,38.08a8.62,8.62,0,0,1-6.78,3.32c-5.55,0-9.74-4.19-9.74-11.51s4.14-11.56,9.74-11.56a8.47,8.47,0,0,1,6.78,3.37V10.5h5.83V40.86h-5.83Zm0-12.11a6.36,6.36,0,0,0-5-2.5c-3.28,0-5.55,2.59-5.55,6.42s2.28,6.37,5.55,6.37a6.36,6.36,0,0,0,5-2.5Z"/><path d="M7.56,38.52l8.13,10.73a1.41,1.41,0,0,0,2.16,0L26,38.52a1.34,1.34,0,0,0-.56-2L18.53,33A4,4,0,0,0,15,33l-6.89,3.5A1.34,1.34,0,0,0,7.56,38.52Z"/><path d="M30.31,14.15,18.12.82a1.91,1.91,0,0,0-2.7,0L3.23,14.15a4,4,0,0,0-1,2.16L-.38,34.52c-.13.9,1,1.53,1.93,1.07L4.29,34.2l12.48-6.37L29.25,34.2,32,35.59c.92.47,2.06-.17,1.93-1.07l-2.57-18.2A4,4,0,0,0,30.31,14.15Z"/></svg> </div> <a id="hireus" href="/">HIRE US</a> <ul class="nav"> <div class="new"> <li><a href="/">HOME</a></li> <li><a href="/aboutus/">ABOUT US</a></li> <li><a href="/ourwork/">OUR WORK</a></li> <li><a href="/services/">SERVICES</a></li> </div> </ul> <section class="intro"> <div class="inner"> <div class="content"> <section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0.2s"> <h1>Welcome to Launchpad</h1> <p>We are a creative agency who specializes in digital marketing and graphic design. Let us launch your business to the next level!</p> </section> <section class="os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0.7s"> <a class="btn" href="#">Hire Us</a> <a class="btn2" href="#">Learn More</a> </section> </div> </div> </section> <div id="second"> <h2 class="title">What we do</h2> <p class="subtitle">Let us take your buisness to the next level.</p> </div> <div class="group2"> <div class="whatwedo"> <div class="subject" id="customdesign"> <img src="images/customdesign.svg" alt="Custom Design"> <h2 class="title2">Custom Design</h2> <p class="desc">Lorem ipsum dolor sit amet, scripta posidonium per ex. Duo ad unum graece luptatum, ius in dolores deleniti posidonium. </p> </div> <div class="subject" id="contentmarketing"> <img src="images/contentmarketing.svg" alt="Content Mrketing"> <h2 class="title2">Content Marketing</h2> <p class="desc">Lorem ipsum dolor sit amet, scripta posidonium per ex. Duo ad unum graece luptatum, ius in dolores deleniti posidonium. </p> </div> <div class="subject" id="emailmarketing"> <img src="images/emailmarketing.svg" alt="Email Marketing"> <h2 class="title2">Email Marketing</h2> <p class="desc">Lorem ipsum dolor sit amet, scripta posidonium per ex. Duo ad unum graece luptatum, ius in dolores deleniti posidonium. </p> </div> </div> </div> <div class="group3"> <img src="images/testimonialbg.png" alt="Norway" style="width:100%;"> <div class="centered">&ldquo;The team at Launchpad exceeded our expectations! They have a bright future ahead of them.&rdquo;<br> <span style="font-weight: 600;">Sam Molloy, Unmatched Masonry</span></div> </div> <!-- <div id="second"> <h2 class="title">Our work</h2> <p class="subtitle">Nervous about taking off? Here's the portfolio.</p> </div> --> <div id="hi"> <div id="forth"> <h2 class="title">Lets get in touch</h2> <form action="mailto:contact@madebylaunchpad.com" method="post" enctype="text/plain" class="email-form"> <input type="text" name="mail" placeholder="Your email address"><br> <input type="submit" value="Lets talk"> </form> </div> </div> <footer> <ul class="nav2"> <li class="li2"><a href="/aboutus">ABOUT US</a></li> <li class="li2"><a href="/ourwork">OUR WORK</a></li> <li class="li2"><a href="/services">SERVICES</a></li> <li> <div class="logo2"> <svg class="logo2" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268 50"><title>Artboard 1</title><path d="M46.26,10.5h6.46V35.17H65.55v5.69H46.26Z"/><path d="M82.8,38.59a9.1,9.1,0,0,1-7,2.82c-3.5,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87A14.42,14.42,0,0,1,79,18.33c5,0,9.6,2,9.6,8.33v14.2H82.8Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M109.15,38.08a10.29,10.29,0,0,1-7.74,3.32c-4.82,0-7.1-2.64-7.1-6.92V18.88h5.78V32.21c0,3,1.59,4.05,4.05,4.05a6.47,6.47,0,0,0,5-2.5V18.88h5.78v22h-5.78Z"/><path d="M135.5,27.57c0-3-1.59-4.1-4.05-4.1a6.26,6.26,0,0,0-5,2.59V40.86h-5.78v-22h5.78v2.87a10.07,10.07,0,0,1,7.69-3.41c4.82,0,7.15,2.73,7.15,7V40.86H135.5Z"/><path d="M157.26,18.33c4.51,0,7.24,2,8.69,4l-3.78,3.5a5.44,5.44,0,0,0-4.64-2.37c-3.5,0-6,2.55-6,6.37s2.46,6.42,6,6.42a5.55,5.55,0,0,0,4.64-2.37L166,37.4c-1.46,2-4.19,4-8.69,4-6.78,0-11.65-4.78-11.65-11.56S150.48,18.33,157.26,18.33Z"/><path d="M184.61,27.48c0-3-1.59-4-4.1-4a6.4,6.4,0,0,0-5,2.59V40.86h-5.78V10.5h5.78V21.74a10.17,10.17,0,0,1,7.74-3.41c4.82,0,7.15,2.64,7.15,6.92V40.86h-5.78Z"/><path d="M196.12,49.24V18.88h5.78v2.78a8.49,8.49,0,0,1,6.78-3.32c5.64,0,9.74,4.19,9.74,11.52s-4.1,11.56-9.74,11.56A8.4,8.4,0,0,1,201.9,38v11.2Zm10.74-25.76a6.47,6.47,0,0,0-5,2.5v7.78a6.62,6.62,0,0,0,5,2.5c3.32,0,5.55-2.59,5.55-6.42S210.19,23.47,206.86,23.47Z"/><path d="M235.94,38.59a9.1,9.1,0,0,1-7,2.82c-3.51,0-7.65-2.37-7.65-7.28,0-5.14,4.14-7,7.65-7,2.91,0,5.51.91,7,2.69v-3c0-2.23-1.91-3.69-4.82-3.69a9.25,9.25,0,0,0-6.42,2.59l-2.18-3.87a14.42,14.42,0,0,1,9.6-3.46c5,0,9.6,2,9.6,8.33v14.2h-5.78Zm0-5.74a5.78,5.78,0,0,0-4.64-1.91c-2.28,0-4.14,1.23-4.14,3.32s1.87,3.23,4.14,3.23a5.78,5.78,0,0,0,4.64-1.91Z"/><path d="M262.57,38.08a8.62,8.62,0,0,1-6.78,3.32c-5.55,0-9.74-4.19-9.74-11.51s4.14-11.56,9.74-11.56a8.47,8.47,0,0,1,6.78,3.37V10.5h5.83V40.86h-5.83Zm0-12.11a6.36,6.36,0,0,0-5-2.5c-3.28,0-5.55,2.59-5.55,6.42s2.28,6.37,5.55,6.37a6.36,6.36,0,0,0,5-2.5Z"/><path d="M7.56,38.52l8.13,10.73a1.41,1.41,0,0,0,2.16,0L26,38.52a1.34,1.34,0,0,0-.56-2L18.53,33A4,4,0,0,0,15,33l-6.89,3.5A1.34,1.34,0,0,0,7.56,38.52Z"/><path d="M30.31,14.15,18.12.82a1.91,1.91,0,0,0-2.7,0L3.23,14.15a4,4,0,0,0-1,2.16L-.38,34.52c-.13.9,1,1.53,1.93,1.07L4.29,34.2l12.48-6.37L29.25,34.2,32,35.59c.92.47,2.06-.17,1.93-1.07l-2.57-18.2A4,4,0,0,0,30.31,14.15Z"/></svg> </div></li> <li class="li3"><a href="/aboutus">TWITTER</a></li> <li class="li3"><a href="/ourwork">FACEBOOK</a></li> <li class="li3"><a href="/services">INSTAGRAM</a></li> </ul> </footer> </body> </html> 

Answer 1

Here's the code working:

 function myFunction() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); } 

 .popup { position: relative; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .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 .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; } @-webkit-keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} } @keyframes fadeIn { from {opacity: 0;} to {opacity:1 ;} } 

 <body style="text-align:center"> <h2>Popup</h2> <div class="popup" onclick="myFunction()">Click me to toggle the popup! <span class="popuptext" id="myPopup">A Simple Popup!</span> </div> </body> 

Answer 2

I built a pretty easy example for you and I'll run you through the code here.

First here it is in action:

 var selector = document.getElementById('showHide'); selector.onclick = function(){ var show = document.getElementById('hidden'); show.style.display = "block" }; 

 <ul class="nav"> <div class="new"> <li id="showHide"><a href="/">HOME</a></li> <li id='hidden' style='display: none;'>Hello</li> <li><a href="/aboutus/">ABOUT US</a></li> <li><a href="/ourwork/">OUR WORK</a></li> <li><a href="/services/">SERVICES</a></li> </div> </ul> 

This is going to be your nav bar. As you can see i made some changes. I gave your home button an id so that we can call it later. I also added a new <li> tag that is hidden from site by "display: none".

<ul class="nav">
    <div class="new">
        <li id="showHide"><a href="/" >HOME</a></li>
        <li id='hidden' style='display: none;'>Hello</li>
        <li><a href="/aboutus/">ABOUT US</a></li>                   
        <li><a href="/ourwork/">OUR WORK</a></li>
        <li><a href="/services/">SERVICES</a></li>
    </div>
</ul>

Here is the magic

var selector = document.getElementById('showHide');

selector.onclick = function(){
    var show = document.getElementById('hidden');
  show.style.display = "block"
};

At the top we create a selector variable to tell it what we want to target, which for us will be the Home button.

Below that we write a function that triggers when our selector is clicked. When it is triggered we define what we want to change(in this case that would be the element with the id of "hidden"). After that we simply edit it's display property to show.