简体   繁体   中英

How can I display a pop-up when I click on a button with this code :?

  1. Heading

    I'm trying to do this Text and Pop-Up but with a button.

Here is my code

<div class="popup" onclick="myFunction()">
  <li class="center-block">
    <a class="button red text-center" href="tel:514-677-3413">
      <i class="fas fa-phone">APPELEZ-NOUS</i>
    </a>
  </li>

I need to place that code to make the text of the popu-up appear but I don't know where in the div

<span class="popuptext" id="myPopup">A Simple Popup!</span>

@inmedia998

Please try this code it works as per your requirement.

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <style> </style> </head> <body> <h3>Click the button and Open simple Pop-Up Box</h3> <div id="PopupDemo" style="margin:50px; width:55px;" data-clipboard-text="1">Click Me</div> <script> $('#PopupDemo').tooltip({ trigger: 'click', placement: 'top' }); function setTooltip(message) { $('#PopupDemo').tooltip('hide') .attr('data-original-title', message) .tooltip('show'); } function hideTooltip() { setTimeout(function() { $('#PopupDemo').tooltip('hide'); }, 1000); } var clipboard = new Clipboard('#PopupDemo'); clipboard.on('success', function(e) { setTooltip('A Simple Popup!'); hideTooltip(); }); clipboard.on('error', function(e) { setTooltip('Failed!'); hideTooltip(); }); </script> </body> </html>

I hope above code will be useful for you.

Thank you.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM