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

【问题标题】：Bootstrap modals don't work with dropdown menu in Liferay引导模式不适用于 Liferay 中的下拉菜单
【发布时间】：2015-02-26 18:03:36
【问题描述】：

这个问题与我的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="dropdown" 删除 dropdown-menu 类和 "dropdown-toggle" 类，但没有帮助（模态显示后仍会立即消失）。

【问题讨论】：

尝试从您的 <a> 标签中删除 href=""。
谢谢。你帮了我很多次。您有哪些步骤可以找出此类问题的原因？
没问题。我正在考虑写一篇关于我的问题解决过程的深入博客，但现在我可以给你重点介绍： 1. 创建一个最小的工作示例。 - 在大多数情况下，这意味着尽可能在 Liferay 之外创建一个示例。（在这种情况下，这意味着为您的示例创建一个 jsfiddle）。
2.如果这不能重现问题，我知道该错误不在我的最小示例中，它发生在其他地方。因此，要么添加到最小示例直到错误发生（在许多情况下，这意味着在 Liferay 中运行代码），要么确定错误是某种配置问题或未提及的问题。 - 如有必要，要求澄清。 3.现在问题已经确定了，所以我看代码确定原因。 - 在这种情况下，我只是猜测，因为当我创建最小示例时，当我点击链接时页面变为空白。
当我达到 #3 时，我还会查看控制台日志以查找错误或奇怪行为，并在网上搜索类似问题。我发现另一种非常有用的方法是使用其他人的代码重新创建一个类似的示例（例如，我会直接从引导网站示例中获取代码并尝试它，看看它是否有效。这样，我知道我没有介绍我自己的任何错误。）。 旁注：我已经添加了一个答案，其中包含有关您的问题的一些详细信息。如果你能接受，那就太好了。

标签： liferay liferay-6 bootstrap-modal twitter-bootstrap-2 alloy-ui

【解决方案1】：

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

【讨论】：