Bootstrap模块在Liferay的下拉菜单中不起作用

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

按钮组

<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或脚本文件）。我试图删除下拉菜单类和“下拉开关”类与数据切换=“下拉”，但它并没有帮助（模态仍然显示后立即消失）。

来源

2014-12-30 Matt

尝试从您的''标记中移除'href =“”''。 – stiemannkj1

谢谢。你帮了我更多的时间。你有什么步骤来找出这些问题的原因？ – Matt

没问题。我正在考虑写一篇关于我的问题解决过程的深度博客，但现在我可以给你亮点： 1.创建一个最简单的工作示例。 - 在大多数情况下，这意味着如果可能的话，在Liferay之外创建一个示例。（在这种情况下，这意味着创建一个你的例子jsfiddle）。 – stiemannkj1

从您的<a>标签中删除href=""标签。当您点击<a href="" ... />的列表项时，会在页面上导致GET重新载入整个页面（因此导致您的onclick永远不会执行并显示模式）。

来源

2015-01-05 15:53:20 stiemannkj1

Bootstrap模块在Liferay的下拉菜单中不起作用

回答

相关问题