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的下拉菜單中不起作用

回答

相關問題