繁体   English   中英

当我单击带有此代码的按钮时,如何显示弹出窗口:?

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

  1. 标题

    我正在尝试使用按钮来执行此文本和弹出窗口。

这是我的代码

<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>

我需要放置该代码以显示弹出窗口的文本,但我不知道 div 中的位置

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

@inmedia998

请尝试此代码,它可以根据您的要求工作。

 <!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>

我希望上面的代码对你有用。

谢谢你。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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