Модификации Bootstrap не работают с выпадающим меню в Liferay

Question

Этот вопрос относится к моему previous question. Я использую Bootstrap 2.3.2 и Liferay 6.2 в комплекте с Tomcat. Я хотел бы использовать модальные окна, созданные в Bootstrap 2.3.2. Благодаря ответу в предыдущем вопросе я могу показать модальность 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 или файлов сценариев). Я попытался удалить выпадающее меню класс и «dropdown-toggle» класс с data-toggle = "выпадающий список", но это не помогло (модально все еще исчезает сразу после показа).

Answer 1

Удалить href="" от <a> тегов. Когда вы нажимаете на элемент списка с <a href="" ... />, он вызывает GET на странице, которая перезагружает всю страницу (таким образом, ваш onclick никогда не будет исполнять и покажет модальность).