Question

这个问题与我的previous question有关。我使用与Tomcat捆绑在一起的Bootstrap 2.3.2和Liferay 6.2。我想使用在Bootstrap 2.3.2中创建的模态窗口。感谢上一个问题中的回答，我能够在Liferay中显示Bootstrap模态。问题是当我使用带有按钮的下拉菜单时，打开模态窗口。

按钮组

<div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                  Add
          <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
           <li><a href="" id="addVertexModalA" onclick="$('#addVertexModal').modal();" > Vertex1 </a></li>
           <li><a href="" id="addVertexModalB"> Vertex2 </a></li>
       </ul>
       <button onclick="$('#addVertexModal').modal();">Show</button>
</div>

当我点击下拉菜单中的 Vertex1 或 Vertex2 按钮时，模式窗口会在显示后立即消失。如果我点击显示按钮，则表示没问题。

模态窗口

<div id="addVertexModal" class="modal fade" style="display: none;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 id="addVertexModalHeader"> Add Vertex </h3>
  </div>
  <div class="modal-body">
    <form class="form-horizontal">
  <div class="control-group">
    <label class="control-label"> names </label>
    <div class="controls">
      <textarea rows="3"></textarea>
    </div>
  </div>
</form>
  </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true"> Cancel </button>
        <a href="" class="btn btn-primary"> Confirm </a>
    </div>
</div>

    <script>

        $(document).on("click","#addVertexModalB",function() {      
           $("#addVertexModal").modal("show");  
        });

    </script>

我在门户网站中只使用这些资源。

<header-portlet-javascript>/scripts/jquery-1.9.1.js</header-portlet-javascript>
<header-portlet-javascript>/scripts/bootstrap_2.3.2.js</header-portlet-javascript>

我想提供jsfiddle或类似的东西，但它在Liferay系统中不起作用（我猜是因为AlloyUI css或脚本文件）。我尝试使用 data-toggle =＆＃34; dropdown＆＃34;删除下拉菜单类和＆＃34;下拉切换＆＃34; 类，但它没有帮助（模态在显示后仍然立即消失。）

Answer 1

从href=""标记中删除<a>。单击带有<a href="" ... />的列表项时，会导致页面上的GET重新加载整个页面（从而导致onclick永远不会执行并显示模态。）

引导模式不适用于Liferay中的下拉菜单

1 个答案: