javascript - JS : Show Pop up box position exactly above tr in table-6ren

javascript - JS : Show Pop up box position exactly above tr in table

转载作者：太空宇宙更新时间：2023-11-04 08:37:18

25

4

我有一张包含某些 TR 的表格。我想要的是，当我单击任何 tr 时，都会打开一个弹出窗口。但我无法将其位置调整到点击它的 tr 之上。

var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("tr_1");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close_div")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

.container {
    margin-top: 10%
}

.container .m-t {
    margin-top: 15px
}

.container .m-t-xs {
    margin-top: 5px
}

.container .m-t-sm {
    margin-top: 10px
}

.container .cursor_pointer {
    cursor: pointer
}

.container .v-middle {
    vertical-align: middle
}

.container .table_div {
    border: thin red solid
}

.container .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.4)
}

.container .modal-content {
    background-color: #fefefe;
    margin: 0 30px;
    padding: 20px;
    border: 1px solid #888;
    width: 100%;
}

.container .modal-content .form-group label {
    font-size: 12px;
    font-weight: 300
}

.container .modal-content:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 10px #fff;
    border-left: solid 10px transparent;
    border-right: solid 10px transparent
}

.container .close_div {
    width: 20px;
    height: 20px;
    position: absolute;
    border-radius: 50px;
    border: thin white solid;
    top: -7px;
    right: -7px;
    text-align: center;
    background: #000000
}

.container .close_div span {
    color: white;
    position: absolute;
    left: 3px;
    top: -1px
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="CSS/style.css" type="text/css" rel="stylesheet">

  <body>
    <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 id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="close_div cursor_pointer">
      <span>&#x2715;</span>
    </div>
    <div class="modal_body">
      <div class="form-group">
        <div class="row">
          <div class="col-lg-9 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-9 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>
    </div>
  </div>

</div>

        </div>
      </div>
    </div>

  </body>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script type="text/javascript" src="JS/script.js">

  </script>
</html>

当我点击任何 tr 时，弹出框应该位于相应的 tr 上方，并使用底部三 Angular 形指向 tr。

我已经搜索了很多，但它对我不起作用。任何帮助都会很棒。谢谢。

最佳答案

代替模式，使用bootstrap popover .连同链接中的解释内容，在 tr 的点击函数中，将放置参数传递给 popover 方法，如下所示:

$('tr').popover({
         content: //Your Html with textbox and button
         , container: 'body'
         , placement: 'auto top'
         , html: true
      });
$(selector).popover('show');

更新:下面给出了完整的工作 html，删除了整个引导模式 html 并将位置更改为自动顶部。使用“AUTO”，如果上面没有空间，弹出窗口将显示在下面。

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