添加內容時bootstrap popover錯位

我試圖編寫函數，當你點擊一個按鈕時，textarea正在我的彈出窗口內容的底部添加。問題是，當textarea顯示時，彈出窗口向下延伸並隱藏文本。我希望popover只能伸展（保存底部位置和原始寬度）有幫助嗎？添加內容時bootstrap 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(); 
};

來源

2015-08-31 Natali234

我做了其中內容被替換隻是在時間酥料餅來計算一個討厭的黑客再次調用時新的正確位置。

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

來源

2015-08-31 21:53:55

添加內容時bootstrap popover錯位

回答

相關問題