The bootstrap modal appears and then disappears when I press on the "Test" button. I've investigated and know that this is due to a jquery conflict but I have no idea where the conflict is. I concluded this because the modal works when I uncomment jQuery.noConflict();.

Note: I'm using bootstrap and the lightning design system which both require the contents to be surrounded.

<apex:page controller="MyController1" showHeader="false" standardStylesheets="false" sidebar="false"  docType="html-5.0">    


    <apex:stylesheet value="{!URLFOR($Resource.bootstrapcss, 'dist/css/bootstrap.css')}"/>   

    <apex:stylesheet value="{!URLFor($Resource.SLDS0102 , '/assets/styles/salesforce-lightning-design-system-vf.min.css')}"/>

     <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>  


  <div class="slds bs"> 

        <apex:form >
                      <apex:commandLink html-data-toggle="modal" html-data-target="#submitModal" title="Test" value="Test" styleClass="btn btn-primary" onclick="showModal();"/>

<!------------------------------------Modal Dialog Box Using Bootstrap JS-------------------------------------->

                    <div class="modal fade" id="submitModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="myModalLabel">Title</h4>
                                <div class="modal-body">

                                <div class="modal-footer">
                                    <apex:outputPanel id="modalButtons">
                                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                                        <apex:commandButton styleClass="btn btn-primary" value="Submit"/>

 <!------------------------------------/Modal Dialog Box Using Bootstrap JS-------------------------------------->





    function showModal() {
      return false;

    //j$ = jQuery.noConflict();

<!-- / JAVASCRIPT -->  

  • 1
    Does your page partially refreshes when you click on Test button? Try to set a dummy rerender attribute for CommandLink. As rerender="dummy" Commented Dec 4, 2015 at 4:32
  • @Salesforcesmarty rerender="dummy" worked! Can you please explain why this is the case? Thank you so much!
    – dinoD
    Commented Dec 4, 2015 at 19:23

1 Answer 1


CommandLinks renders as a HTML anchor tag which submits the form onclick event, which means it submits the form when you click it. SF does it all for us, like below snippet from HTML for a command link

onclick="if(typeof jsfcljs == 'function'){jsfcljs(document.getElementById('j_id0:thisForm'),'j_id0:thisForm:j_id4,j_id0:thisForm:j_id4','');}return false"

In your scenario, as you didn't provide any rerender property, onclick event was resulting in a partial page refresh and was hiding your modal.

But setting as rerender="dummy", it only tries to partially refresh a DOM element with ID as dummy, which does not exist (or to an element which is outside your modal code). So no changes to your modal.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .