Question

嗨，我已经找到了这方面的所有地方，但无法找到一个好方法：/

我的网站上有一个动态填充的列表，如下所示：

<li>
  name: blue<br/>
  procesor: blue<br/>
  <div class="right top">2001</div>
  <input type="hidden" name="Description" value="short">
</li>

我一直在寻找一种方法，让小型弹出式节目显示列表中的hiddent文本字段的内容。

我尝试了很多免费的模态javascript代码，但他们似乎都停止工作或破坏我的模板。

任何人都知道如何做到这一点。从现在起我没有工作的javascript代码，我正在寻找最好的方式来做这件事。它不需要花哨。只是一个带弹出窗口的白色boc

Answer 1

最简单的方法是将title属性添加到li：

<li title="Some short desc">
...
</li>

这适用于所有桌面浏览器，但不适用于手机。

另一种方法是使用来自http://kushagragour.in/lab/hint/

的优秀hint.css

它不依赖于任何JavaScript，而是使用data- *属性，伪元素，内容属性和CSS3过渡来创建工具提示。您可以微调方向，颜色甚至动画。

Answer 2

试试这个

$(function() {

  $(".list li input[type=hidden]").each(function(index, obj) {
    $(".popup").append($(obj).val() + "<br/>");

  });
  $(".popup").show();
});

.popup {
  position: relative;
  top: 10px;
  border: solid 2px #E5988A;
  width: 200px;
  text-align: left;
  margin: 0px auto;
  z-index: 2;
  background-color: #FFF;
  padding: 10px;
}
.disabled {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 1;
  display: block;
  background-color: #333;
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list">

  <li>
    name: blue
    <br/>procesor: blue
    <br/>
    <div class="right top">2001</div>
    <input type="hidden" name="Description" value="short" />
  </li>
  <li>
    name: green
    <br/>procesor: gree
    <br/>
    <div class="right top">2002</div>
    <input type="hidden" name="Description" value="anothershort">
  </li>

</ul>

<div class="popup"></div>
<div class="disabled"></div>

Answer 3

Html代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="app1.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>

</head>

<body> 
  <div>
      Select <select id = "MyList"></select>
  </div>
  <input type="hidden" name="Description" value="short" id="hiddendiv">
</body>
</html>

<强>的Javascript

$(document).ready(function(){
  var select = document.getElementById("MyList");
      var options = ["1", "2", "3", "4", "5"];
      for (var i = 0; i < options.length; i++) {
          var opt = options[i];
          var el = document.createElement("option");
          el.textContent = opt;
          el.value = opt;
          select.appendChild(el);
      }
      $('#MyList').hover(
        function(){
          var value=$('input').val();
          alert(value);
        }, function() {
        }
      )

});

单击时创建弹出框，隐藏元素的值

3 个答案: