Bootstrap Popover自己關閉

Question

我目前正在編輯視圖。所以我決定使用一個帶有窗體的popover。我正在使用bootstrap v.3.0.0。彈出窗口完美顯示，但大約在6 - 8秒後會自動關閉。下面的代碼：

<a class="driveEdit" href="#"> 
    <i class="fa fa-pencil edit-drive" style="font-size: 1.3em;" data-toggle="popover" data-placement="left" rel="tooltip"></i> 
</a> 
<div id="popover-content" class="hide"> 
<!-- MyForm --> 
<form id="tab" method="POST" 
    action="@routes.UiscsiController.editVirtualDrive()" 
    data-toggle="validator"> 
<div class="form-group"> 
    <label for="login">Login</label> <input 
     type="text" id="login" maxlength="50" name="login" 
     value="" 
     class="form-control" required/> <span 
     class="help-block with-errors"></span> 
</div> 
<div class="form-group"> 
    <label for="jvm_memo">JVM Memo</label> 
    <select id="jvm_memo" name="jvm_memo" class="form-control"> 
      <ul class="dropdown-menu" role="menu"> 
       <option value="2">2</option> 
       <option value="4">4</option> 
       <option value="6">6</option> 
       <option value="8">8</option> 
       <option value="10" selected="true">10</option> 
       <option value="12">12</option> 
       <option value="14">14</option> 
       <option value="16">16</option> 
       <option value="18">18</option> 
       <option value="20">20</option> 
       <option value="22">22</option> 
       <option value="24">24</option> 
       <option value="26">26</option> 
       <option value="28">28</option> 
       <option value="30">30</option> 
      </ul> 
     </select> 
</div> 
<div class="form-group"> 
    <button class="btn btn-primary" 
     onclick="this.addEventListener('click', clickStopper, false);"> 
     <i class="fa fa-save"></i>Save 
    </button> 
</div> 
<input type="hidden" class="editDriveId" name="editDriveId" id="editDriveId" value="" /> 

</form> 
</div> 

在這裏，我酥料餅劑：

<script type="text/javascript"> 
var hasPopover = false; 
$(document).ready(function(){ 
    $(".edit-drive").popover({ 
     html : true, 
     content: function() { 
      return $("#popover-content").html(); 
     } 
    }); 
</script> 

那是黎民的行爲或對我的代碼的任何錯誤？

Answer 1

我已將placement屬性設置爲bottom以及script中缺失的});，它顯示得非常好。希望這可以幫助你：

var hasPopover = false; 
 

 
$(".edit-drive").popover({ 
 
    html: true, 
 
    placement: 'bottom', 
 
    content: function() { 
 
    return $("#popover-content").html(); 
 
    } 
 
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<a class="driveEdit" href="#"> 
 
    <i class="fa fa-pencil edit-drive" style="font-size: 1.3em;" data-toggle="popover" data-placement="left" rel="tooltip">Click me please!</i> 
 
</a> 
 
<div id="popover-content" class="hide"> 
 
    <!-- MyForm --> 
 
    <form id="tab" method="POST" action="@routes.UiscsiController.editVirtualDrive()" data-toggle="validator"> 
 
    <div class="form-group"> 
 
     <label for="login">Login</label> 
 
     <input type="text" id="login" maxlength="50" name="login" value="" class="form-control" required/> <span class="help-block with-errors"></span> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="jvm_memo">JVM Memo</label> 
 
     <select id="jvm_memo" name="jvm_memo" class="form-control"> 
 
     <ul class="dropdown-menu" role="menu"> 
 
      <option value="2">2</option> 
 
      <option value="4">4</option> 
 
      <option value="6">6</option> 
 
      <option value="8">8</option> 
 
      <option value="10" selected="true">10</option> 
 
      <option value="12">12</option> 
 
      <option value="14">14</option> 
 
      <option value="16">16</option> 
 
      <option value="18">18</option> 
 
      <option value="20">20</option> 
 
      <option value="22">22</option> 
 
      <option value="24">24</option> 
 
      <option value="26">26</option> 
 
      <option value="28">28</option> 
 
      <option value="30">30</option> 
 
     </ul> 
 
     </select> 
 
    </div> 
 
    <div class="form-group"> 
 
     <button class="btn btn-primary" onclick="this.addEventListener('click', clickStopper, false);"> 
 
     <i class="fa fa-save"></i>Save 
 
     </button> 
 
    </div> 
 
    <input type="hidden" class="editDriveId" name="editDriveId" id="editDriveId" value="" /> 
 

 
    </form> 
 
</div>