Всплывающее окно для таблицы с вертикальной прокруткой не работает (означает, что всплывающее окно не прокручивается вверх или вниз с запущенным элементом) - PullRequest
Новая
       1

Всплывающее окно для таблицы с вертикальной прокруткой не работает (означает, что всплывающее окно не прокручивается вверх или вниз с запущенным элементом)

0 голосов
/ 18 февраля 2020

Я работаю над таблицей (с вертикальной прокруткой), где я должен открыть всплывающее окно при событии щелчка. Но когда я прокручиваю таблицу вверх, поповер остается на той же позиции. Я хочу, чтобы поповер прокручивался вверх или вниз с соответствующим элементом.

https://codepen.io/LAXMI1991/pen/jOPrrpj

$(document).ready(function() {
  $('[data-toggle="popover"]').popover();
});
.fixed_header {
  width: 100%;
}

.fixed_header tbody {
  display: block;
  overflow: auto;
  height: 200px;
  width: 100%;
}

.fixed_header thead tr {
  display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="fixed_header">
    <table class="table ">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Email</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>July</td>
          <td>Dooley</td>
          <td>july@example.com</td>
          <th><a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">...</a></th>
        </tr>
      </tbody>
    </table>
  </div>
</div>

1 Ответ

0 голосов
/ 18 февраля 2020

Это просто простое решение вашей проблемы, но оно не будет работать в сложном программировании. просто дайте id или что-то своему (...) элементу, который переключает popover.и вам нужна хорошая CSS практика. 

$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
  
  var $element = $('[data-toggle="popover"]');

$(window).scroll(function() {
    
    if($(this).scrollTop() > 0) {
        $element.fadeOut(1000);
    } else {
        $element.fadeIn(1000);
    }
});
  $('a').click(function(){
    $('.popover').css({position: 'sticky'});
  });
});
.fixed_header
{
  width:100%;
}
.fixed_header tbody{
  display:block;
  overflow:auto;
  height:200px;
  width:100%;
}
.fixed_header thead tr{
  display:block;
}


/* .popover-body {
    height: 50px;
    overflow-y: auto;
    white-space:pre-wrap;
} */
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <div class="fixed_header">
     <table class="table ">
    <thead>
      <tr>
        <th>Firstname</th>
        <th >Lastname</th>
        <th>Email</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
         <th><a href="#"  data-toggle="popover" title="Popover Header" data-trigger="click" data-content="Some content inside the popover" >...</a></th>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
         <th><a href="#" data-toggle="popover" data-trigger="click" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
         <th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
            <th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
            <th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
            <th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
            <th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
            <th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
            <th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
            <th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
            <th><a href="#" data-toggle="popover" data-trigger="focus" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
            <th><a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
            <th><a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
         <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
            <th><a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover" >...</a></th>
      </tr>
    </tbody>
  </table>
  </div>
  </div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...