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>

这是我的popover发起人：

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

Bootstrap Popover自行关闭

1 个答案: