Строки таблицы начальной загрузки исчезают при использовании с всплывающими окнами - PullRequest
Новая
       2

Строки таблицы начальной загрузки исчезают при использовании с всплывающими окнами

1 голос
/ 05 июня 2019

Когда я пытаюсь отобразить всплывающее окно при щелчке строки таблицы, всплывающее окно показывает, но удаляет строку из таблицы.

Я пытался добавить div element в строку и изменить JQuery, но безрезультатно. 

 
    <head>

   

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <link rel ="stylesheet" href = "test.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>

    <body>
            <div class="event-btn">
                    <div class = "btn-contents">
                    </div>
            </div>

            <div id = "s-cont">

              <table class = "table">
                    <thead>
                        <tr>
                            <th scope = "col"> Start </th>
                            <th scope = "col"> Session </th>
                            <th scope = "col"> Length </th>
                        </tr>
                    </thead>
                    <tr data-toggle ="popover" data-placement="top"  data-content = "HI" data-trigger = "click" >
                        <td> content 1 </td>
                        <td>content 2</td>
                        <td>content 3 </td>
                    </tr>
                    <tr data-toggle ="popover" data-placement="top"  data-content = "HI" data-trigger = "click" >
                        <td> content 1 </td>
                        <td>content 2</td>
                        <td>content 3 </td>
                    </tr>
                    <tr data-toggle ="popover" data-placement="top"  data-content = "HI" data-trigger = "click" >
                        <td>content 1 </td>
                        <td>content 2</td>
                        <td>content 3 </td>
                    </tr>
            </div>

            <script>
                $('[data-toggle="popover"]').popover({})
            </script>
    </body>

Это работает в CodePen, и строки в таблицах по-прежнему удаляются.

1 Ответ

1 голос
/ 06 июня 2019

Если у вас есть несколько стилей в родительском элементе, которые мешают всплывающему элементу, вы захотите указать пользовательский контейнер, чтобы HTML-код всплывающего окна появлялся внутри этого элемента вместо link . Используйте data-container="body" для решения проблемы. 

$('[data-toggle="popover"]').popover({})
<head>
 
        <meta name="viewport" content="width=device-width, initial-scale=1">
       
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <link rel ="stylesheet" href = "test.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    </head>

    <body>
            <div class="event-btn">
                    <div class = "btn-contents"> </div>
            </div>

            <div id = "s-cont">

              <table class = "table">
                    <thead>
                        <tr>
                            <th scope = "col"> Start </th>
                            <th scope = "col"> Session </th>
                            <th scope = "col"> Length </th>
                        </tr>
                    </thead>
                    <tr data-toggle ="popover" data-placement="top"  data-container="body" data-content = "HI" data-trigger = "click" >
                        <td> content 1 </td>
                        <td>content 2</td>
                        <td>content 3 </td>
                    </tr>
                    <tr data-toggle ="popover" data-placement="top"  data-container="body" data-content = "HI" data-trigger = "click" >
                        <td> content 1 </td>
                        <td>content 2</td>
                        <td>content 3 </td>
                    </tr>
                    <tr data-toggle ="popover" data-placement="top"  data-container="body"  data-content = "HI" data-trigger = "click" >
                        <td>content 1 </td>
                        <td>content 2</td>
                        <td>content 3 </td>
                    </tr>
                    </table>
            </div>
  
    </body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...