如何让信息按钮出现并使其在 jquery mobile 或 javascript 中起作用答案

【问题标题】：How to get info button to appear and make it functional in jquery mobile or javascript如何让信息按钮出现并使其在 jquery mobile 或 javascript 中起作用
【发布时间】：2018-10-07 16:56:38
【问题描述】：

在附件中，您将看到一个应用程序的照片，该应用程序是一个单位转换器。在图片中，它具有可单击的小信息按钮，单击时，与旁边的输入部分相关的信息在应用程序中显示为警报，并传递有关该部分的信息。我想知道这是如何完成的，是否可以使用 jQuery mobile 和/或 JavaScript 来完成。

【问题讨论】：

投票结束，因为你实际上并没有表现出研究成果

标签： javascript jquery html jquery-mobile

【解决方案1】：

由于您的问题被标记为 jQuery Mobile，因此这是一个使用 JQM 的可能解决方案。请注意，您甚至不需要“确定”按钮。 JQM 弹出窗口将关闭，只需点击外部或按“Esc”键即可。

.ui-info.ui-controlgroup-horizontal .ui-controlgroup-controls {
  display: block;
}
.ui-info.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-input-text {
  margin-top: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.ui-info .ui-icon-info {
 float: right;
 padding: 0;
 height: 22px;
}

.ui-info .ui-icon-info:after {
  position: relative;
  top: 0;
  margin-top: -22px;
}

.ui-popup {
  max-width: 420px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
  <div data-role="page">
    <div data-role="header" data-position="fixed">
      <h2>Header</h2></div>
    <div role="main" class="ui-content">
      <div data-role="controlgroup" data-type="horizontal" class="ui-info">
        <legend>Legend<a href="#info" data-rel="popup" data-transition="pop" class="ui-icon-info ui-btn-icon-notext" title="Info">Info</a></legend>
        <input name="text-basic" id="text-basic" value="" type="text">
      </div>
    </div>
    <div data-role="footer" data-position="fixed">
      <h2>Footer</h2></div>
    <div data-role="popup" data-position-to="window" id="info">
      <div data-role="header" data-theme="a">
        <h1>Title</h1>
      </div>
      <div role="main" class="ui-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

使用 jQuery

$("#id_of_button").click(function(){
 alert("Named after the " + input_value1.value + " who invented " + input_value2.value + " etc..."); // Insert the values from your form inputs into this alert function
  });

【讨论】：

是否涉及任何 css 或 jqmobile 样式？感谢您提供 jQuery 代码。
要在“onclick”事件后显示一个基本的警告框，您不需要添加任何额外的 CSS。
应该指定。为了获得需要点击的小信息图标，我需要css吗？
这取决于但简短的回答是否定的，你不需要 CSS。您可以包含 Bootstrap 库并在标记中使用其中一个字形图标，如下所示：