如何让信息按钮出现并使其在 jquery 移动设备或 javascript 中发挥作用

Question

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

Answer 1

使用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
  });

Answer 2

由于您的问题被标记为 jQuery 移动，这里有一个使用 JQM 的可能解决方案。请注意，您甚至不需要 "OK" 按钮。只需点击外部或按 "Esc" 键即可关闭 JQM 弹出窗口。

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

如何让信息按钮出现并使其在 jquery 移动设备或 javascript 中发挥作用

How to get info button to appear and make it functional in jquery mobile or javascript

javascript

jquery

html

jquery-mobile