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

Hi i have looked every where for this but cant find a good way of doing it :/

嗨,我已经找到了每个地方,但无法找到一个好方法:/

I have a dynamically populated list on my website that looks like this:

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

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

I have been looking for a way to have a small popup show with the contents of the hiddent text field in the list.

我一直在寻找一种方法,让一个小的弹出窗口显示列表中的hiddent文本字段的内容。

I have tried many free modal javascript code but they all seem to either stop working or destroy my template.

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

Dose anyone know how I could do this. I have no working javascript code as from now and am looking for the best way todo this. It doesn't need to be fancy. Just a white boc with the popup

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

3 个解决方案

#1

The easiest way is to add title property to li:

最简单的方法是向li添加title属性:

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

This should work on all desktop browsers, but not on mobiles.

这适用于所有桌面浏览器,但不适用于移动设备。

Another way is to use excellent hint.css from http://kushagragour.in/lab/hint/

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

It does not rely on any JavaScript and rather uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips. You can fine tune orientation, colours, and even animations.

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

#2

Try this one

试试这个吧

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

#3

Html Code

<!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() {
        }
      )

});

#1