Opening a bootstrap modal on click of a custom button on standard salesforce page

  • I have a bootstrap modal that I want to open on click of a Custom button on the standard Salesforce page.

    So for that I need to Execute a Javascript on the 'Onclick' action of the button (that'll be how the custom button will be configured)

    Can anybody guide me as to how should I go about writing the jQuery?

    The code for modal bootstrap looks like this:

    <apex:page sidebar="false" standardStylesheets="false"  standardController="Festival__c" extensions="MyController" showHeader="false" >
    
    <head>
    
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    
        <link rel="stylesheet" media="print" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    
    </head>
    
    <script>
    $(document).ready(function(){
    $("#myModal").modal('show');
    });
    </script>
    

    here myModal is the Id of the modal dialog that contains the fields that the user needs to enter and click either SAVE or CANCEL

    What issue are you having? Looks like you have the correct line to open the modal. The selector could be changed to $('[id$=myModal]') though if you do not have tags on every element

    hey Eric..I want to open the popup on click of a custom button. I am confused how to call this bootstrap modal (in html) using jquery

    Use $("#myModal").modal('show'); in the onclick of the button

    This will not work because 'MyModal' does not exist when the button is clicked and hence the error shows up

    I'm voting to close this question as off-topic because Abandoned

  • You're going to run in to a number of issues with this.

    1) Your modal window requires style sheets. Stylesheets cannot be added to a standard page layout.

    2) The modal dialog has to be created prior to you calling your code:

    $(document).ready(function(){ $("#myModal").modal('show'); });
    

    3) And this is the hardest part: It sounds as if you want to have an inline form within this modal window. This is not possible without dynamically creating all your form elements in javascript. This is not a good idea - and will be very costly.

    To pull this off, I would do the following:

    1) Within your custom button: your script would need to dynamically create the stylesheet links. These sheets will be dumped on the page only when a user clicks the button.

    2) Create your modal dialog dynamically as per Eric's answer (I'm not familiar with bootstrap). Since you have the style sheets and scripts on the page, the modal window will look normal. In the onHide attribute of the modal: add something to refresh the page: window.location.reload

    3) Instead of attempting to dynamically create your html form on the click of the button: create a visualforce page that does what you need. You can make it iframe friendly by using the page attributes to hide unneeded elements. eg:

    <apex:page showHeader="false" standardStyleSheets="true" showChat="false" sidebar="false"> 
    <!-- Your form, and save button here -->
    </apex:page>
    

    Now, the content of the modal window will just need to be an iframe to the custom visualforce page.

    On the page, include all needed fields, and a save button.

    The end result will be a modal window that iframes out to a completely versatile, and yet separately managed visualforce page. when the user makes edits, he clicks save. Once saved, he can close the modal window - at which point the script window.location.reload is called: and the edits are now visible, and the page is refreshed.

  • You need to include the modal into your page's html.

    <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
      <!-- [MODAL BODY] -->
    </div>
    

    It will not render by default because of aria-hidden="true".

    Then you can trigger the modal block to appear with a few attributes on a button. For example, if you can also use an outputLink:

    <apex:outputLink styleClass="btn btn-primary" value="#myModal" html-data-toggle="modal">Click me!</apex:outputLink>
    

    Bootstrap's engine will do the magic.

    Check this working example (no VF): http://jsfiddle.net/5XM3J/

    He mentioned he is on a standard page layout. The VF tag is not applicable - but yes: he does need to plop the element in to the DOM.

  • Ok. Since you do not have an element on the page you can add this to your button code:

    BootstrapDialog.show({
                title: 'Your Title',
                message: 'Your Message,
                size: BootstrapDialog.SIZE_LARGE,
                onhide: function(dialogRef){
                    //Code to execute on hide
                }   
    
            });
    

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM