Question

我试着编写一个函数，当你点击一个按钮时，textarea正在我的popover内容的底部添加。问题是当显示textarea时，popover向下延伸并隐藏文本。我希望popover只延伸（保存底部位置和原始宽度）帮助

这是我的代码：

HTML：

<div class="popover-markup">
  <a href="#" class="trigger">
    This link triggers the popover.
  </a>
  <span class="content hide">
    <p>This is the popover content.
    </p>
      <button id="clickme" onclick="showText()">click me</button>
      <textarea class="textarea"></textarea>
  </span>
</div>

JS：

$(document).ready(function () {
    $('.popover-markup > .trigger').popover({
        html: true,
        title: function () {
            return $(this).parent().find('.head').html();
        },
        content: function () {
            return $(this).parent().find('.content').html();
        },
        container: 'body',
        placement: 'top',
        html: true
    });

    $('.textarea').hide();


});
function showText() {
    $('.textarea').show();
};

Answer 1

我做了一个讨厌的黑客，其中的内容被及时更换，以便弹出窗口在再次调用时计算新的正确位置。

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>
        .container {
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <button id="my-show-popover" type="button" class="btn btn-default" data-container=".container" data-toggle="popover"
                data-placement="top" data-html="true" data-trigger="manual">
            Popover on top
        </button>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            var popoverNoTextAreaContent = "Nasty hobbitses. <button type='button' id='my-show-text-area-button' class='btn btn-default'>Click</button>",
                popoverWithTextAreaContent = popoverNoTextAreaContent + "<textarea></textarea>";
            $('#my-show-popover').click(function () {
                $(this).attr('data-content', popoverNoTextAreaContent).popover('show');
            });
            $(document).on('click', '#my-show-text-area-button', function () {
                $('#my-show-popover').attr('data-content', popoverWithTextAreaContent).popover('show');
            });
        });
    </script>
</body>

添加内容时引导popover错位

1 个答案: