Javascript JS：在表中的tr正上方显示弹出框位置
我有一张有特定TRs的桌子。 我想要的是，当我点击任何tr时，就会打开一个弹出窗口。但我无法将它的位置精确地操纵到点击它的位置Javascript JS：在表中的tr正上方显示弹出框位置,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一张有特定TRs的桌子。 我想要的是，当我点击任何tr时，就会打开一个弹出窗口。但我无法将它的位置精确地操纵到点击它的位置 var modal=document.getElementById（'myModal'）； //获取打开模式对话框的按钮 var btn=document.getElementById（“tr_1”）； //获取关闭模态的元素 var span=document.getElementsByClassName（“close_div”）[0]； //当用户单击该按钮时，打
var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“tr_1”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“close_div”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}.container{
利润率最高：10%
}
.集装箱{
利润上限：15px
}
.container.m-t-xs{
页边空白：5px
}
.集装箱.m-t-sm{
利润上限：10px
}
.container.cursor\u指针{
光标：指针
}
.容器.v-中间{
垂直对齐：中间对齐
}
.货柜.表格(分区){
边框：细红色实心
}
.集装箱{
显示：无；
位置：固定；
z指数：1；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：#000；
背景色：rgba（0,0,0,0.4）
}
.容器.模态内容{
背景色：#fefe；
利润率：0.30px；
填充：20px；
边框：1px实心#888；
宽度：100%；
}
.容器.模式内容.表单组标签{
字体大小：12px；
字号：300
}
.容器.模式内容：之后{
内容：''；
位置：绝对位置；
最高：100%；
左：0；
右：0；
保证金：0自动；
宽度：0；
身高：0；
边框顶部：实心10px#fff；
左边框：实心10px透明；
右边框：实心10px透明
}
.container.close_div{
宽度：20px；
高度：20px；
位置：绝对位置；
边界半径：50px；
边界：薄白色固体；
顶部：-7px；
右：-7px；
文本对齐：居中；
背景：#000000
}
.容器.关闭分区跨度{
颜色：白色；
位置：绝对位置；
左：3px；
顶部：-1px
}
全部的
名称
部门
布拉德利·斯蒂芬
销售额
无名氏
营销
✕；
名字
姓
更新
$('tr').popover({
content: //Your Html with textbox and button
, container: 'body'
, placement: 'auto top'
, html: true
});
$(selector).popover('show');
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<title>Bootstrap Popover</title>
<style>
.container .table_div {
border: thin red solid
}
header {
padding-top: 160px;
}
</style>
<script>
$(document).ready(function () {
var html = '<div class="form-group"><div class="row"><div class="col-lg-8 col-md-9 col-sm-9 col-xs-9"><label>First Name</label><input type="text" name="first_name" value="" class="form-control"></div></div><div class="row m-t"><div class="col-lg-8 col-md-9 col-sm-9 col-xs-9"><label>Last Name</label><input type="text" name="last_name" value="" class="form-control"></div><div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><label for=""></label><button type="button" name="button" class="m-t-xs">Update</button></div></div></div>'
$('tbody tr').attr({
"data-toggle": 'popover'
, "data-placement": 'auto top'
, "data-trigger": 'click'
, "data-html": 'true'
, "title": function () {
return $(this).children('td:nth-of-type(2)').html();
}
, "data-content": html
, "data-container": 'body'
});
$('tbody tr').popover();
$('tbody tr').on('show.bs.popover', function () {
$('tbody tr').not(this).popover('hide');
});
});
</script>
</head>
<body>
<header></header>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="table_div table-responsive">
<table class="table">
<thead>
<th>All</th>
<th>Name</th>
<th>Department</th>
</thead>
<tbody>
<tr class="cursor_pointer" id="tr_1">
<td>
<input type="checkbox" name="">
</td>
<td>
Bradley Stephen
</td>
<td>
Sales
</td>
</tr>
<tr class="cursor_pointer">
<td>
<input type="checkbox" name="">
</td>
<td>
John Doe
</td>
<td>
Marketing
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
自举爆米花
.货柜.表格(分区){
边框：细红色实心
}
标题{
填充顶部：160px；
}
$（文档）.ready（函数（）{
var html='First name last name update'
$（'tbody tr'）.attr({
“数据切换”：“popover”
，“数据放置”：“自动顶部”
，“数据触发器”：“单击”
，“数据html”：“真”
，“标题”：功能（）{
返回$（this.children（'td:nth of type（2）'））.html（）；
}
，“数据内容”：html
，“数据容器”：“主体”
});
$（'tbody tr'）.popover（）；
$（'tbody tr'）.on（'show.bs.popover'，function（）{
$（'tbody tr'）。不是（this.popover（'hide'）；
});
});
全部的
名称
部门
布拉德利·斯蒂芬
销售额
无名氏
营销
.container.table_div{border:thin red solid}